Dom本质_html-js-css

概述一：题目 1.DOM是哪种基本的数据结构？解答：数 2.DOM *** 作的常用API有哪些？解答：获取DOM节点，以及节点的propery和attribute、获取父节点，获取子节点、新增节点、删除节点 3.DOM节点的attr和property有何区别？解答：property是DOM中的属性，修改的是js中标准的属性。例如：对象中的name,age,addresss。attribute是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+121     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‘))  // 打印zhangsan20 console.log(all[1].getAttribute(‘attr-name‘))  //打印lisi21 all[0].setAttribute(‘attr-name‘,‘hello word‘)22 console.log(all[0].getAttribute(‘attr-name‘))  // 打印hello word23 </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添加到div120 </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>