DOM节点（一）
全文手打，转载请注明出处
一）
DOM：Document Object Model 文档对象模型
是HTML和XML文档的编程接口，定义了访问和操作HTML和XML文档的标准方法
DOM以树形目录结构表达HTML和XML文档，每一个节点就是一个DOM元素
document html head/标签
body/标签
★①节点层次：父子节点、同胞节点
在节点树中，顶端节点为根（root），每个节点都有父节点，除了根（root），1个节点可以有任意数量的子节点，同胞节点含有相同父节点
★②节点分类 节点名称nodeName（只读不能被重新赋值修改）
元素节点：标签 标签名相同
属性节点：标签的属性 属性名相同
文本节点：标签后的换行符 #test
文档节点：document #document
★③节点的值nodeValue 节点类型nodeType
元素节点：undefined或null 1
属性节点：属性值 2
文本节点：文本本身 3
文档节点： 9
注释： 8
<div class = "wrapper">
<div class = "box">
<div id = "content" title = "标题">这里是测试内容</div>
<p style = "color:red;background-color:gray;font-size:30px;">asdfg</p>
</div>
</div>
<script>
//元素节点类型：标签名称DIV
console.log(document.getElementById('content').nodeName)
//属性节点类型：title = "标题",,title
console.log(document.getElementById('content').getAttributeNode('title').nodeName)
//父节点
console.log(document.getElementById('content').parentNode.nodeName)
//子节点，是数组
console.log(document.getElementById('content').childNode)
//文本节点类型：子节点，#text数组的内容，这里是测试内容
console.log(document.getElementById('content').childNode[0].nodeName)
//文档节点类型：#document
console.log(document.nodeName)
</script>
<script>
//元素节点值，，null console.log(document.getElementById('content').nodeValue)
//属性节点值，，标题，属性的值
console.log(document.getElementById('content').getAttributeNode('title').nodeValue)
//属性节点值，，p标签的style color:red;background-color:gray;font-size:30px;
console.log(document.getElementById('p')[0].getAttributeNode('style').nodeValue)
//文本节点值，，这里是测试内容，文本内容
console.log(document.getElementById('content').childNode[0].nodeValue)
//文档节点值
console.log(document.nodeName) </script>
<script> //元素类型，，1 console.log(document.getElementById('content').nodeType) //属性类型，，2 console.log(document.getElementById('content').getAttributeNode('title').nodeType) //文本类型，，3 console.log(document.getElementById('content').childNode[0].nodeType) //文档类型，，9 console.log(document.nodeType) </script>
二）节点操作
①获取DOM节点
<div id = "box">box</div> <p>p01</p> <p>p02</p> <div class = "box">box1</div> <div class = "box">box2</div> <div class = "box">box3</div> <input type = "text" name = "username"> //通过id获取节点，，<div id = "box">box</div> var box = document.getElementById('box'); box.style.color = 'red'; //通过标签名获取节点，，返回2个p标签，返回节点数组 var pAll = document.getElementsByTagName('p'); pAll [0].style.fontSize = '30px'; //通过标签的name值获取节点，，input，返回节点数组 var names = document.getElementByName('userName'); names[0].value = '张三'; //通过class值获取节点，，3个，返回节点数组 var boxes = document.getElementsByClassName('box'); for(var i in boxes){ boxes[i].innerHTML = 'HAHAHA' } //通过选择器返回找到结果集中的第一个，， console.log(document.querySelect('p')); //标签：返回第一个p标签 console.log(document.querySelect('.box')); //类、console.log(document.querySelect('#box')); //id，id是唯一的，只能用这个 //通过选择器返回找到结果集是一个节点数组 console.log(document.querySelectAll('p')); //标签：返回第一个p标签 console.log(document.querySelectAll('.box')); //类
②创建DOM节点
//创建元素节点 <p> </p> var el = document.createElement('p'); //创建属性节点 var attr = document.createAttribute('class'); //添加属性名 attr.value = 'wrapper'; //为属性设置值，，class = wrapper attr.value = 'wrapper box'; //为属性设置2个值，， //创建文本节点，，字符串"这个节点是动态创建的" var txt = document.createTextNode('这个节点是动态创建的'); //关联以上3个节点 el.appendChild(txt); //为el添加子节点,在元素节点上添加文本节点 el.setAttributeNode(attr); //在元素节点上添加属性节点 //创建文档节点，将创建的节点添加到文档中 document.body.appendChild(el); //简洁写法 （4行代替上7行）只能创建1个元素 var oDiv = document.createElement('div'); //创建元素节点 oDiv.setAttribute('class','wrapper box'); //为元素节点添加属性及属性值 oDiv.innerHTML = '创建DOM元素的简洁写法'; //为元素节点设置文本内容 document.body.appendChild(oDiv); //把元素节点添加到文档中
③插入节点
<ul class = "list"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> <script> var li = document.createElement('li'); //创建一个标签 var txt = document.createTextNode('这是新的li标签'); //添加一个文本 li.appendChild(txt); //把文本添加到标签里 //插入内部的尾部 父节点.appendChild(创建的节点) var list = document.getElementsByClassName('list')[0]; //如果有list返回的是数组 list.appendChild(li); //li标签是变量，不加括号 //插入内部的某个前面 父节点.insertBefore(创建的节点,已知的子节点) var oLi = document.getElementsByTagName('li')[2]; 或者 var ul = document.getElementsByClassName('list')[0]; var oLi = ul.getElementsByTagName('li')[2]; //从父级获取子元素 ul.insertBefore(li,oLi); </script>
④替换节点（修改节点）
<body>
<div class = "box">box</div>
<strong>strong</strong>
<script>
// 将strong标签修改成p标签 <p style = 'color:pink;'>修改后内容</p>
// 创建节点
var newP = document.createElement('p');
newP.setAttribute('style','color:pink;'); //加属性
newP.setAttribute('title','节点修改');
newP.innerHTML = '修改后内容';
//替换节点 父节点.replaceChild(新节点，老节点)
var oBody = document.body; //对于节点的获取，最好缓存到变量中
var oldStrong = document.getElementsByTagName('strong')[0]; //找到老节点
oBody.replaceChild(newP,oldStrong);
</script>
</body>
⑤克隆节点
深度克隆：包括子节点一起克隆
浅克隆：只会将找到的节点克隆，子节点不会克隆
需要被复制的节点.cloneNode(true/false) true:复制当前节点以及所有子节点，，（深度克隆） false:仅复制当前节点，，（浅克隆） <div class = "box"> <strong>strong</strong> <span>span</span> </div> <script> var box = document.getElementsByClassName('box')[0]; //深度克隆，，全 var deepClone = box.cloneNode(true); document.body.appendChild(deepClone); //浅克隆，，只box var shallowClone = box.cloneNode(false); document.body.appendChild(shallowClone); </script>
⑥删除节点
<div class = "box">
<strong>strong</strong>
<span>span</span>
</div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<script>
var box = document.getElementsByClassName('box')[0];
// 删除当前节点及子节点：节点.remove()
box.remove();
// 删除父节点下面子节点：父节点.removeChild(子节点) 只删一个
var span = box.getElementsByTagName('span')[0];
box.removeChild(span); //变量不加引号
// 删除ul中所有的li标签
方法一：用remove()删除ul标签及所有li标签，再创建1个ul标签
方法二：遍历
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i in lis){
ul.removeChild(lis[i]); //有问题
}
for(var i=0;i<lis.length;i++){
ul.removeChild(lis[i]); //也有问题
}
for(var i=0;i<lis.length;i++){
ul.removeChild(lis[i]); //可以
--i;
}
</script>
全文手打，转载请注明出处！
全文手打，转载请注明出处!
全文手打，转载请注明出处!
