JavaScript——DOM之节点操作

节点操作

前述：
一、节点的概述
二、节点操作
- 1.节点层级
- 2、案列-下拉菜单
- 3.兄弟节点
- 4、创建节点
- 5、删除节点
- 6、案列：留言并且删除节点
- 7、复制节点
- 8、案例：动态生成表格
- 9、三种动态创建元素的区别
三、DOM重点核心

前述：

学习节点操作是为了更好地操作获取元素。在这之前，我们学习了获取元素的几种方法：
● document.getElementByld（）
● document.getElementsByTagName（）
●document.querySelector（）等
但是此方法我们用起来逻辑性不强、繁琐

在这之外还有一种方法：
利用节点层级关系获取元素
●利用父子兄节点关系获取元素
●逻辑性强,但是兼容性稍差

一、节点的概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JaveScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

二、节点操作

1.节点层级

利用DOM树可以把节点划分为不同的层级关系常见的是父子兄层级关系

1.父级节点 node.parentNode
parentDode 属性可返回某节点的父节点，注意的是：返回最近的一个父节点
如果指定的节点没有父节点则返回null

<body>
<div class="father"><div class="son"></div></div>
</body>
<script>
var so = document.querySelector('.son') ;console.log(so.parentNode);</script>

输出结果：

2.子节点
a.parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点、文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用chlidNodes
var ul = document.querySelector(‘ul’) ;
for(var i = 0 ; i < ul.childNodes.length ; i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[ i ] ) ;
}
}
b.parentNode.firstElementChild
返回第一个子元素节点，找不到则返回null。
c.parentNode.lastElementChild
返回最后一个子元素节点，找不到返回null。
需要注意的是：这两个方法有兼容性问题，要IE9以上才支持。

在实际开发中，firstChild和lastChild 包含其他节点,操作不方便,而firstElementChild和lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1,如果想要第一个子元素节点,可以使用parentNode. chilren[0]
2,如果想要最后一个子元素节点,可以使用parentNode. chilren.length - 1

2、案列-下拉菜单

     <style type="text/css">.father div{display: none;}</style></head><body><ul class = "father"><li>1<div >哈哈</div></li><li>2<div >嘿嘿</div></li><li>3<div >嘻嘻</div></li><li>4<div >啦啦</div></li></ul><script type="text/javascript">var fa = document.querySelector('.father');var lis = fa.children;console.log(lis)for(var i=0;i<lis.length;i++){lis[i].onmouseover = function(){                   this.children[0].style.display = 'block'}lis[i].onmouseout = function(){this.children[0].style.display = 'none' ;}}</script></body>

效果图：鼠标经过1时：
鼠标经过3时：

3.兄弟节点

1、node.nextSibling
node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。包含所有节点
2、node.previousSibling
node.previousSibling返回当前元素上一个兄弟节点，找不到返回null，包含所有节点
3、node.nextElementSibling
node.nextElementSibling返回当前元素下一个兄弟节点，找不到返回null
4、node.previousElementSibling
node.previousElementSibling返回当前元素上一个兄弟节点，找不到返回null
注意：3/4方法有兼容性，IE9以上才支持

解决兼容性问题（封装一个兼容性函数）

function getNextElementSibling(element){
var el = element ;
while (el = el.nextSibling){
if(el . nodeType == 1){
return el ;
}
}
return null ;
}

4、创建节点

document.createElement(‘tagName’)

document.createElement()方法创建由tagName指定的HTML元素，这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称作动态创建元素节点。
1、node.appendChild(child)
此方法是将一个节点添加到指定父节点的子节点列表末尾。（类似于css里面的after伪元素）
2、node.insertBefore(child,指定元素)
此方法将一个节点添加到父节点的指定的子节点前面。（类似于css里面的before伪元素）

模拟留言板

<body>
<textarea rows="" cols="">1234</textarea><button type="button">发布</button><ul></ul>
<body>
<script>
//获取元素var but = document.querySelector('button') ;var text = document.querySelector('textarea') ;var u = document.querySelector('ul') ;//注册事件but.onclick = function(){if(text.value == ''){alert('您没有输入内容！') ;return false ;}else {//1、创建元素//先有li才能赋值var li = document.createElement('li') ;li.innerHTML = text.value ;//2、添加元素u.insertBefore(li,u.children[0]) ;//将添加的节点放在前面}}</script>

5、删除节点

node.removeChild(child)

此方法是从DOM中删除一个节点，返回删除的节点
注意：“node” 是父节点 child 是子节点

<body>
<ul><li>111</li><li>122</li><li>133</li><li>144</li></ul><button type="button">删除</button>
</body>
<script>
//1、获取元素var lis = document.querySelector('ul') ;var btu = document.querySelector('button')//1、注册元素  btu.onclick = function(){if(lis.children.length == 0){//处理程序  当节点没有时按钮触发不了this.disabled = true ;}else{ //删除节点操作lis.removeChild(lis.children[0]);}}</script>

点击删除：

点击三次后：

6、案列：留言并且删除节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><textarea rows="" cols=""></textarea><button type="button">留言发布</button><ul></ul><script type="text/javascript">//1、获取元素var btn = document.querySelector('button') ;var text = document.querySelector('textarea') ;var ul = document.querySelector('ul') ;//2、注册元素 处理程序btn.onclick = function(){if(text.value==''){alert('您没有输入内容！') ;return false ;}else{//先创建li元素 var lis = document.createElement('li') ;lis.innerHTML = text.value + "<a href='javescript:;'>删除</a>" ;//添加元素ul.insertBefore(lis,ul.children[0]) ;//删除元素var as = document.querySelectorAll('a') ;//获取元素for(var i=0 ;i<as.length ; i++){as[i].onclick = function(){ul.removeChild(this.parentNode) ;//删除的是li  当前a所在的li}}}}</script></body>
</html>

效果：
点击删除后：

7、复制节点

在js中，复制节点也是克隆节点
语法：node.cloneNode()
此方法是返回调用该方法的节点的一个副本，也称为拷贝节点

注意：如果括号参数为空或者为 false ，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点。

<body><button type="button">1111</button><button type="button">2222</button><button type="button">3333</button><button type="button">4444</button>
<script>var btn = document.querySelectorAll('button') ;btn[0].cloneNode();console.log(btn[0].cloneNode(true));
</script></body>

node.cloneNode();括号里为空或者false 浅拷贝，只复制标签不复制里面的子节点；
node.cloneNode();括号里为true 深拷贝，复制标签和里面的内容。

8、案例：动态生成表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table  cellspacing="0" border="1" ><thead><tr><th>姓名</th><th>姓别</th><th>学号</th><th>操作</th></tr></thead><tbody></tbody></table><script type="text/javascript">//1、先添加学生信息var datas =[{name:'sanma',sex :'女' ,number:201821100},{name:'lilay',sex :'男' ,number:201821101},{name:'yaya',sex :'男' ,number:201821102},{name:'stery',sex :'女' ,number:201821103}];//2、在tbody里面添加行：我们的数据里 有几个同学就添加几行var tdy = document.querySelector('tbody') ;for(var i=0 ;i<datas.length ;i++){var tr = document.createElement('tr') ;tdy.appendChild(tr) ;for(var j in datas[i]){//3、添加列var td = document.createElement('td') ;//对象里面的属性值给tdtd.innerHTML = datas[i][j] ;//for(var j in datas[i])//其中 datas[i]返回的是属性//datas[i][j] 才返回的是属性值tr.appendChild(td) ;}//4、创建有删除的单元格var tw = document.createElement('td') ;tw.innerHTML = '<a href="javescript:;">删除</a>' ;tr.appendChild(tw) ;}//5、删除操作var as = document.querySelectorAll('a') ;for(var i=0; i<as.length ; i++){as[i].onclick = function(){tdy.removeChild(this.parentNode.parentNode) ;}}</script></body>
</html>

点击第三个删除时：

点击删除sanma 列时：

9、三种动态创建元素的区别

document.write()
element.innerHTML
document.createElement()

1、document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘，相当于重新一个页面，之前的页面被替换。
2、innerHTML是将内容写入某个DOM节点，不会导致页面被替换。
3、innerHTML 创建对多个元素效率更高（前提是不是拼接字符，而是采取数组形式拼接），结构稍微复杂。

拼接字符：

var inne = document.querySelect('.inner');
for（var i =0 ;i <=100 ;i++）{inne.innerHTML += '<a href="#">balabala</a>';
}

数组拼接

var inne = document.querySelect('.inner');
for（var i =0 ;i <=100 ;i++）{arr.push('<a href = "#">balabala</a>');
}
inne.innerHTML = arr.join('');

4、createElement（） 创建多个元素效率稍微低一点点，单是结构更清晰。

不同的浏览器下，innerHTML 效率要比 creatElement高

三、DOM重点核心

文档对象模型（Document Object Model）简称DOM，是W3C组织推荐的处理扩展标记语言的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1、对于JaveScript，为了能够使javascript操作HTML，javescript就有了一套自己的dom编程接口。
2、对于HTML，dom使得HTML形成一颗dom树，包含文档、元素、节点。

注意：我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。

关于DOM操作，我们主要是针对于元素的操作，主要是：创建、增、删、改、查、属性操作、事件操作。
创建：
document.write
innerHTML
createElement
增
appendChild
inserBefore
删
removeChild
改
主要修改dom的元素属性，dom元素的内容、属性,表单的值等
1．修改元素属性:src.href、title等
2修改普通元素内容:innerHTML、innerText
3．修改表单元素: value、type、disabled等
4.修改元素样式: style、className
查
主要获取查询dom的元素

DOM提供的API方法: getElementByld、getElementsByTagName古老用法不太推荐
2.H5提供的新方法:querySelector、queryelectorAll提倡
3.利用节点操作获取元素∶父(parentNode)、子(children)、兄(previousElementSibling.
nextElementSibling) 提倡
属性操作
主要针对于自定义属性。
1.setAttribute:设置dom的属性值
2.getAttribute:得到dom的属性值
3.removeAttribute移除属性

给元素注册事件，采取事件源.事件类型=事件处理程序
onclick 鼠标点击左键触发

onmouseover 鼠标经过触发

onmouseout 鼠标离开触发

onfocus 获得鼠标焦点触发

onblur 失去鼠标焦点触发

onmousemove 鼠标移动触发

onmouseup 鼠标弹起触发

onmousedown 鼠标按下触发