1、获取节点
document.getElementById('id属性值'); |
返回拥有指定id的第一个对象的引用 |
document.getElementsByClassName('class属性值'); |
返回拥有指定class的对象集合 |
documentt.getElementsByTagName('标签名'); |
返回拥有指定标签名的对象集合 |
document.getElementsByName('name属性值'); |
返回拥有指定名称的对象结合 |
document.querySelector('CSS选择器'); |
仅返回第一个匹配的元素 |
document.querySelectorAll('CSS选择器'); |
返回所有匹配的元素 |
document.documentElement |
获取页面中的HTML标签 |
document.body |
获取页面中的BODY标签 |
document.all[''] |
获取页面中的所有元素节点的对象集合型 |
2、获取当前元素同级元素
element.nextSibling | 返回当前元素的下一个同级元素 没有就返回null |
element.previousSibling | 返回当前元素上一个同级元素 没有就返回null |
3、获取当前元素的子节点
element.chlidren | 返回当前元素所有子元素节点对象,只返回HTML节点 |
element.chilidNodes | 返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点) |
element.firstChild | 返回当前元素的第一个子节点对象 |
element.lastChild | 返回当前元素的最后一个子节点对象 |
4、新建节点
document.createElement('元素名'); |
创建新的元素节点 |
document.createAttribute('属性名'); |
创建新的属性节点 |
document.createTextNode('文本内容'); |
创建新的文本节点 |
document.createComment('注释节点'); |
创建新的注释节点 |
document.createDocumentFragment( ); |
创建文档片段节点 |
5、添加新节点
parent.appendChild( element/txt/comment/fragment ); |
向父节点的最后一个子节点后追加新节点 |
parent.insertBefore( newChild, existingChild ); |
向父节点的某个特定子节点之前插入新节点 |
element.setAttributeNode( attributeName ); |
给元素增加属性节点 |
element.setAttribute( attributeName, attributeValue ); |
给元素增加指定属性,并设定属性值 |
5、