Dom基础概念：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 /*
 8 DOM : Document Object Model 文档对象模型
 9 文档：html页面
10 文档对象：页面中元素
11 文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
12 
13 DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
14 DOM节点
15 
16 getElementById
17 getElementByTagName
18 document
19 document.body
20 */
21 </script>
22 </head>
23 
24 <body>
25     <div id="div1">
26         <p>11111111</p>
27         <ul id="ul1">
28             <li>11111</li>
29             <li>22222</li>
30             <li>33333</li>
31             <li>44444</li>
32         </ul>
33     </div>
34 </body>
35 </html>

 

Dom树：

 

DOM节点
childNodes \ children

  • 获取第一级子元素
  • 有兼容性问题（空白节点）， nodeType属性

firstChild \ firstElementChild

  • 获取子元素里的第一个

lastChild \ lastElementChild

  • 获取子元素里的最后一个

nextSibling \ nextElementSibling

  • 获取指定元素的下一个兄弟节点

previousSibling \ previousElementSibling

  • 获取指定元素的上一个兄弟节点


parentNode

  • 获取父节点，点击链接隐藏整个li


parentNode&offsetParent区别

  • offsetLeft \ offsetTop
  • offsetWidth \ clientWidth

有兼容性问题，标准下不能获取两层
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
第三种方式的好处：自定义属性、相对网址

创建DOM元素
createElement(标签名)        创建一个节点
appendChild(节点)            追加一个节点
例子：留言板插入内容
插入元素
insertBefore(节点, 原有节点)    在已有元素前插入
例子：倒序留言板插入内容

 

删除DOM元素

  • removeChild(节点)        删除一个节点
  • 例子：删除留言

替换DOM元素

  • replaceChild(节点, 已有节点)    替换节点