note对象和dom树

最新推荐文章于 2022-06-23 17:42:19 发布

原创最新推荐文章于 2022-06-23 17:42:19 发布 · 196 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript操作DOM树，包括添加、修改和删除节点的方法，如appendChild和insertBefore，以及如何获取和设置元素属性。同时，还探讨了note对象的属性，如childNodes、firstChild和lastChild，帮助读者掌握DOM操作的基本技能。

一 在末尾添加节点
1 获取ul标签
2 创建li标签，document.createElement("标签名称")方法
3 创建文本,    document.createTextNote("文本内容")；
4 文本添加到li下面  appendChild()方法
5 li添加到ul       appendChild()方法

二 元素对象element
1 获取属性里的值   getAttribute("name");
2 设置属性   setAttribute("name","value");
3 删除属性  removeAttribute("name") //不能删除value
4 获取子标签   getElementByTagName()方法，返回的是一个集合。

三 note对象的属性
![](https://img-blog.csdnimg.cn/20190222143337468.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1Njk1Ng==,size_16,color_FFFFFF,t_70)
子节点: childNodes:得到所有子节点，兼容性很差
            firstChild: 获取第一个子节点
            lastChild: 获取最后一个子节点

父节点: parentNode
同辈节点: li直接关系是同辈节点
                 nextSibling:返回一个给定节点的下一个兄弟节点
                 previousSibling: 返回一个给定节点的上一个兄弟节点
 
四 操作dom树
1 appendChild方法:添加子节点到末尾
2 insertBefore(newNode,oldNode)方法: 在某个节点之前插入一个新的节点
      两个参数: 1 要插入的节点 2 在谁之前插入
      插入一个节点，节点不存在，创建: 1 创建标签 2 创建文本 3 把文本添加到标签下面