DOM

1. 节点基础

节点类型

元素节点 　　 Node.ELEMENT_NODE(1)
属性节点 　　 Node.ATTRIBUTE_NODE(2)
文本节点 　　 Node.TEXT_NODE(3)
节点属性

nodeType

nodeType 属性返回以数字值返回指定节点的节点类型。

nodeName

nodeValue

nodeName nodeValue nodeType
元素节点 元素名 null 1
属性节点 属性名称 属性值 2
文本节点 #text 节点的内容 3
Document #document null 9
2. 节点获取和修改属性

获取元素节点

document.getElementById(elementId)
document.getElementsByName(elementName)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
getElementById(elementId),document.getElementsByName(elementName)是是document节点的专有方法；其他两个方法不是
var ul=document.getElementsByTagName(‘ul’)[0];
//var li01=ul.getElementsByTagName(‘li’);
var li01=ul.getElementsByClassName(‘li-css’);
后面三种方法返回的是NodeList,是一种伪数组（同样arguments也是伪数组）。
节点系统属性的访问和修改

id
tagName
className
style
code:

<ul>    <li id="li01" name="li" CLASS="licss" style="background-color: red">列       表一</li></ul><script>    window.onload=function () {        var li=document.getElementById('li01');        //******* 属性访问 ********        console.log(li.className);  //licss        console.log(li.id);         //li01        console.log(li.tagName);    //LI        console.log(li.nodeName);    //LI        console.log(li.style[0]);    //LI        //******* 属性修改 ********        li.className='licss2';        li.style.backgroundColor='blue';        //id 和 tagName 属性通常不可以修改。    }</script>

节点属性的访问和修改通用方法

dom.getAttribute(‘属性名’)
dom.setAttribute(‘属性名’,’属性值’)
console.log(li.getAttribute(‘id’));
li.setAttribute(‘class’,’licss02’);
注意 不要给节点增加用户自定义属性，比如(belong),如果非要增加，则如第4点

列表一

dataset 属性

//必须以data开头，每个单词小写、并以“-”分割

列表一

//dom访问属性
//dom.dataset.name(采用驼峰命名法)
var li=document.getElementById(‘li01’);
console.log(li.dataset.userId); //s001
3. 构建节点和添加、删除节点

createElement(‘标签名’)

var ul=document.getElementsByTagName('ul')[0];var li=document.createElement('li');

createTextNode(‘内容’)

var ul=document.getElementsByTagName('ul')[0];var li=document.createElement('li');var text=document.createTextNode('列表二');//text.nodeValue='haha';

createAttribute(‘属性名’)

var ul=document.getElementsByTagName('ul')[0];var li=document.createElement('li');var text=document.createTextNode('列表二');var atrr=document.createAttribute('class');atrr.nodeValue='li-css';li.attributes.setNamedItem(atrr);//等价于//li.setAttribute('class','li-css')li.appendChild(text);ul.appendChild(li);

innerHTML 和 innerText

var ul=document.getElementsByTagName('ul')[0];ul.innerHTML+='<li>段落二</li>'//下面代码直接破坏列表的结构，通常innerText用于修改标签内文本节点的内容ul.innerText+='<li>段落二</li>'

innerHTML和上面三种动态构建节点比较

innerHTML 操作方便，但是执行效率较低。 innerHTML 适合批量添加复杂的节点 动态构建节点 适合页面渲染完成之后增加节点
克隆节点（复制现有的节点）

dom.cloneNode(false/true)

var ul=document.getElementsByTagName(‘ul’)[0];
var li01=document.getElementById(‘li01’);
var li02=li01.cloneNode(true);
li02.id=’li02’;
ul.appendChild(li02)
添加节点

appendChild()

ul.appendChild(li);

insertBefore(newChild,refChild)

删除和替换节点

removeChild(dom)

ul.removeChild(li01);

replaceChild(new-dom,old-dom)

ul.replaceChild(li02,li01)

清空所有内部节点

ul.innerHTML='';

4. 遍历节点

子节点

方法 说明 备注
childNodes 所有直接子节点 伪数组
children 所有直接元素子节点 伪数组
childElementCount 所有直接元素子节点的个数 children.length
firstChild 第一个子节点 childNodes[0]
firstElementChild 第一个元素子节点 children[0]
lastChild 最后一个子节点 childNodes[childNodes.length-1]
lastElementChild 最后元素一个子节点
父节点

console.log(p01.parentNode.nodeName);

兄弟节点

方法 说明 备注
previousSibling 前面一个节点
previousElementSibling 前面一个元素节点
nextSibling 后面一个节点
nextElementSibling 后面一个元素节点
console.log(p01.previousElementSibling.innerText);