DOM操作

一、结点

加载HTML页面时，web浏览器生成的一个树状结构，用来表示页面内部结构，称之为DOM树，DOM将这种树形结构理解为有节点组成；

1.节点类型

• 标签节点；
• 文本节点（空格，回车，文字）；
• 属性节点：只能获取文本和标签阶段；

二. 获取子节点

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
 1. 父元素.children; // 非标准属性 不存在兼容性问题；
var child = xUl.children;
console.log(child); --> [li,li,li,li,li]
 2. 父元素.childNodes ; //标准属性，会获取到文本;
	var childs = xUl.childNodes;

结点属性

包括：nodeType，nodeName，nodeValue;
nodeType: 获取节点类型；
nodeName: 获取节点名称；
nodeValue: 操作文本节点的内容；

• 标签节点 —>1;
• 属性节点 —>2;
• 文本节点 —>3;

三. 获取父节点

==子节点.parentNode:==获取的是直接父元素；
==子节点.offsetParent:==获取定位元素，如果没有定位父元素获取到body；

四. 其他节点

1. first
   父节点.firstChild: ie可以正常使用，标准浏览器会获取到文本节点
   父节点.firstElementChild:专门为标准浏览器设置的，ie6 7 8;
   **兼容：**两个取值之间的兼容，用 ||，把不容易实现的放在前面；

   var dirst = oUl.firstElementChild || oUl.firstChild;
   

2. last
   父节点.lastChild: ie可以正常使用，标准浏览器会获取到文本节点
   父节点.lastElementChild: 专门为标准浏览器设置的，ie6 7 8;
   跟 first 用法一样；
3. 下一个兄弟节点 next
   参考节点.nextSibling 参考节点.nextElementSibling
4. 上一个兄弟
   参考节点.previousSibling 参考节点.previousElementSibling

五. 操作节点

1. 创建标签节点 document.createElment(‘标签名’)

   var cL = document.createElement("li");
   

2. 创建文本节点 document.createTextNode(‘文本内容’)

   var text = document.createTextNode("新创建的文本内容");
   

3. 将创建好的文本添加到标签中

   cL.appendChild(text);
   

添加

1. 追加
   父亲节点.appendChild(子节点): 在父元素的末尾添加子节点;
2. 在某个元素之前加入
   父节点.insertBefore(newChild,refChild)–>(新元素,定义好的元素);
   如果添加的是一个已经存在的标签，会发生物理位移

删除

1. 节点.remove();
   删除元素本身；
2. 父节点.removeChild(子节点);
   删除整个父元素;

替换

父元素.replaceChild(newChild,refChild); -->(新创建的元素，之前本来就有的元素)；

 var oUl = document.getElementsByTagName("ul")[0];
 var oW = document.getElementById("w");

 //创建的节点
 var oLi = document.createElement("li");
 oLi.innerHTML = "学习";
 oUl.replaceChild(oLi,oW); //新元素替换掉旧元素;

克隆（复制节点）

语法：复制的元素.cloneNode(boolean)
boolean ：默认为false,只复制标签，没有内容；
true：复制标签，复制内容;

<ul>
        <li>学习</li>
        <li>吃午饭</li>
        <li>学习</li>
        <li id="w">吃晚饭</li>
        <li id="x">学习</li>
    </ul>
// js部分:
var oX = document.getElementById("x");
var cX = oX.cloneNode(true);
oUl.appendChild(cX);

六. 获取标签的方法

document.querySelector(选择器)：获取到选择器选中的标签中的第一个元素；
document.querySelectorSll(选择器)：获取到选择器选中的所有标签；
只能获取到静态的，如果获取的时候没有，后来添加获取不到；

//class选择器
var s = document.querySelectorAll(".box");
//id选择器
var Id = document.querySelector("#box");
var xId = document.querySelectorAll("#box li");//id = box里边的左右li元素；

七. getAttribute(操作结点属性)

getAttribute可以获取到自定义属性
用法：

设置：标签.setArribute(属性名,属性值)；//(需要设置的属性,属性的值);
获取：标签.getArribute(属性名)；//(通过名称获取属性的值);