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本质的主要内容,如果未能解决你的问题,请参考以下文章

XML的本质讨论

XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?

一次阿里面试后对函数本质的理解

DOM属性和HTML属性的区别

xml笔试题

认识DOM