Dom本质

最新推荐文章于 2023-01-20 15:50:44 发布

weixin_30345055

最新推荐文章于 2023-01-20 15:50:44 发布

阅读量523

点赞数

文章标签：数据结构与算法

原文链接：http://www.cnblogs.com/zhswater/p/11161368.html

版权

一：题目

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>