Dom本质
Posted zhswater
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Dom本质相关的知识，希望对你有一定的参考价值。
一：题目
1.DOM是哪种基本的数据结构？
解答：数
2.DOM操作的常用API有哪些？
解答：获取DOM节点，以及节点的propery和attribute、获取父节点，获取子节点、新增节点、删除节点
3.DOM节点的attr和property有何区别？
解答：property是DOM中的属性，修改的是js中标准的属性。例如：对象中的name,age,addresss。attribute是html标签上的特性，修改的是Html标签的特性。例如：width,height,class,attr-name
二：知识点
1.DOM的本质：DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型而已。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div>这是内容</div> 11 </body> 12 </html>
2.获取DOM节点：a:prototype b:attribute
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="div1">这是div1的内容</div> 11 <div>这是div2222的内容</div> 12 <div>这是div3333的内容</div> 13 <div class="ip_addr">这是div4444的内容</div> 14 <div class="ip_addr">这是div555的内容</div> 15 <div class="ip_addr">这是div666的内容</div> 16 </body> 17 <script> 18 var div1 = document.getElementById(‘div1‘) // 元素 19 console.log(div1) 20 var divList = document.getElementsByTagName(‘div‘) // 集合 21 console.log(divList.length) 22 console.log(divList[3]) 23 var ip_addrs = document.getElementsByClassName(‘ip_addr‘) // 集合 24 console.log(ip_addrs.length) 25 console.log(ip_addrs[2]) 26 var all = document.querySelectorAll(‘div‘) // 集合 27 console.log(all.length) 28 console.log(all[3]) 29 </script> 30 </html>
property操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="div1" style="width: 100px;height:100px" class="a">这是div1的内容</div> 11 <div style="width: 200px;height:200px" class="b">这是div2222的内容</div> 12 <div style="width: 300px;height:300px" class="c">这是div3333的内容</div> 13 <div style="width: 400px;height:400px" class="d">这是div4444的内容</div> 14 <div style="width: 500px;height:500px" class="e">这是div555的内容</div> 15 <div style="width: 600px;height:600px" class="f">这是div666的内容</div> 16 </body> 17 <script> 18 var all = document.querySelectorAll(‘div‘) // 集合 19 for(let i=0;i<all.length;i++) 20 var index = i+1 21 console.log(‘第‘+index+‘个div的宽和高是：‘) 22 console.log(all[i].style.width) // 获取样式 23 console.log(all[i].style.height) 24 console.log(all[i].className) 25 console.log(all[i].nodeName) 26 console.log(all[i].nodeType) 27 28 all[3].style.width=‘10px‘ // 修改样式 29 all[3].style.height=‘10px‘ 30 console.log(all[3]) 31 </script> 32 </html>
Attribute操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div attr-name=‘zhangsan‘ id="div1" style="width: 100px;height:100px" class="a">这是div1的内容</div> 11 <div attr-name=‘lisi‘ style="width: 200px;height:200px" class="b">这是div2222的内容</div> 12 <div attr-name=‘wangwu‘ style="width: 300px;height:300px" class="c">这是div3333的内容</div> 13 <div style="width: 400px;height:400px" class="d">这是div4444的内容</div> 14 <div style="width: 500px;height:500px" class="e">这是div555的内容</div> 15 <div style="width: 600px;height:600px" class="f">这是div666的内容</div> 16 </body> 17 <script> 18 var all = document.querySelectorAll(‘div‘) // 集合 19 console.log(all[0].getAttribute(‘attr-name‘)) // 打印zhangsan 20 console.log(all[1].getAttribute(‘attr-name‘)) //打印lisi 21 all[0].setAttribute(‘attr-name‘, ‘hello word‘) 22 console.log(all[0].getAttribute(‘attr-name‘)) // 打印hello word 23 </script> 24 </html>
三：DOM结构操作
1.新增节点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="div1" style="border: 1px solid green;">div1的内容</div> 11 <p id="p2">这是p2</p> 12 </body> 13 <script> 14 var div1 = document.getElementById(‘div1‘) // 获取节点 15 var p1 = document.createElement(‘p‘) // 创建新节点 16 p1.innerText = ‘this is p1‘ //内容赋值 17 div1.appendChild(p1) // 把p1添加到div1中 18 var p2 = document.getElementById(‘p2‘) // 获取p2节点 19 div1.appendChild(p2) // 把p2添加到div1 20 </script> 21 </html>
2.获取父元素和子元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div> 11 我是父元素 12 <div id="div1">div1的内容 13 <div> 14 我是子元素 15 </div> 16 </div> 17 </div> 18 </body> 19 <script> 20 var div1 = document.getElementById(‘div1‘) 21 var parent = div1.parentElement // 只能有一个父元素 22 var children = div1.childNodes //可以有多个子元素 23 console.log(parent) 24 console.log(children[1]) 25 </script> 26 </html>
3.删除节点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div> 11 我是父元素 12 <div id="div1">div1的内容 13 <div> 14 我是子元素 15 </div> 16 </div> 17 </div> 18 </body> 19 <script> 20 var div1 = document.getElementById(‘div1‘) 21 var children = div1.childNodes //可以有多个子元素 22 div1.removeChild(children[1]) // 移除元素 23 </script> 24 </html>
以上是关于Dom本质的主要内容，如果未能解决你的问题，请参考以下文章