常用的DOM操作

Author Avatar
Orange 1月 19, 2017

在前端编程中,jQuery的使用在极大提升代码简化的同时也使我们对原生JavaScript的一些基本API的遗忘,总结一下原生JS对DOM的一些常用操作方法

DOM创建

DOM节点创建最常用的就是document.createElement和document.createTextNode方法

1
2
3
var ell =document.createElement('div');
var ell2 =documentElement('input');
var node =documentTextNode('hello world')

DOM创建

元素查询的API返回的结果是DOM节点或者DOM节点的列表,提供两种Query方法

1
2
3
4
5
6
7
8
9
10
  返回当前文档中第一个类名为"myclass"的元素
var el = document.querySelector('.myclass')
  返回一个文档中所有的class为"note"或者"alert"的div元素
var els = document.querySelectorAll('div.note,div,alert')  
  获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('linht')
var els = document.getElementsByTagName('li')

DOM的更改

1
2
3
4
5
6
7
8
9
  添加,删除元素
ele.appendChild(el);
ele.removeChild(el);
  替换子元素
ele.replaceChild(el1,el2)  
  插入元素
pare
expand_less