遍历DOM

最新推荐文章于 2024-04-20 11:50:28 发布

Linleslie

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量342

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/leslie_ln/article/details/53995707

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

遍历DOM

DOM（文档对象模型）是一种父子关系层次树结构，构成当前web页面模型，最顶层的对象是window对象，document是它的子对象之一。

当web页面加载完成后，浏览器就具有了完整层次化的DOM来表示页面内容。
注意：只有当页面加载完成后，DOM才是可用的，在这之前，执行DOM语句，会报错。


        <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>DOM层次树</title>

            </head>

            <body>
                <h1>Things to DO</h1>
                <ol id="toDoList">
                    <li>li</li>
                    <li>now</li>
                    <li>window</li>

                </ol>
                <p>hello world</p>
            </body>
            </html>

以上面代码为例，看看其DOM层次结构树图：

元素作为页面父元素，而其下也有两个直接子元素、与(这两个元素具有相同父元素)，以此类推。灰色格子表示该元素是包含文本的。其中的交叉点和末端就表示为节点（元素节点、文本节点）。

节点类型

除上面的节点外，还有一些其他节点分别代表元素属性、注释等。

childNodes属性–节点列表

每个节点都有一个childNode属性。此属性类似于数组，包含了该节点全部直接子节点的集合

获取节点列表最后和第一个元素问题

当获取到节点列表时，可以通过myElement.childNodes.[0]/[myElement.childNodes.length-1]获取，是不是稍显繁琐呢？可以通过元素节点的
firstChild和lastChild属性获取第一个以及最后一个元素。而parentNode属性可以获取其节点父节点如：

        //获取节点列表最后一个元素
    var lastNode=myElement.lastChild;
        //获取其父节点(即就是myElement元素)
        var parentNode=lastNode.parentNode;

nextSlibling和previousSlibling属性

获取一个节点列表中元素的上一个元素和下一个元素，具有相同父节点的兄弟节点

nodeValue(节点值)

nodeName(节点名)

getElementsByTag(元素名)

注意：

getElementById(元素id属性值)：获取的事指定属性值的元素
getElementsBuTagName(元素名)：获取的一组特定元素集合

读取元素属性–getAttribute()

举个简单例子：

    //属性位于标签前半部分，形式：属性=属性值
<div id="id1" title="report">here is some text</div>

属性节点

步骤：

获取目标元素

var myNode=document.getElementById(“id1”);
通过getAttribute()获取属性值

myNode.getAttribute(“title”);
注意：尝试访问不存在的属性，就返回Null

DOM查看器

如果使用的事火狐浏览器，还可以安装DOM查看器插件，查看节点（安装后，ctrl+shift+I快捷键打开）
火狐浏览器DOM查看器插件使用

document对象创建节点

步骤：
1. 创建一个新节点（该节点创建后，它的确存在，单此时还不属于DOM树的任何位置，因此也就不会出现在浏览器窗口）

将该节点添加到DOM树的指定位置，该节点就成为了页面的部分了

createElement()——————创建（元素）节点

可以创建任何类型的Html元素，如段落、区间等。
如：

      var newDiv=document.createElement("div");

新元素

存在了，但此时还没有属性、内容，也还没被添加到DOM树中

createTextNode()

cloneNode()

复制已有的节点，该方法接收一个布尔单参数，为true表示不仅要复制节点，还有复制他的所有子节点
如：


    var myNode=document.getElementById("id1");
    cloneNode=myNode.cloneNode(true);

注意:

使用该方法时，元素的id也属于其属性之一，当复制节点是要注意修改器id，因为一个文档中id应该是唯一的
这三种创建的节点，此时还未放置在DOM树中

将节点放置在DOM树中

appendChild()

做为DOM树中已有节点的子节点，只需要获取父节点，然后调用appendChild()方法。该方法总是将子节点添加到其最后一个子节点之后，及此节点会成为父节点的lastChild.
如：


    var myDiv=document.getElementyId("id1");

    var newDiv=document.createTextNode(“hello hi”);

    myDiv.appendChild(newDiv);

该段代码将新文本节点（newDiv）添加到已有节点（myDiv）的子节点。当然该方法不仅可以用于添加文本节点也可以添加其他类节点

insertBefore()

由其字面意思，就能知道：插入子节点到指定节点前面。该方法有两个参数：要插入的新节点、要插入位置的节点。总结一下其步骤：
1. 创建新节点
2. 获取父节点
3. 获取要插入位置的节点（新节点位于该节点之前）

replaceChild

将父节点一个现有的子节点替换成新节点

删除节点

removeChild()

通过父节点删除指点子节点
步骤：
1. 获父节点
2. 获取删除节点
3. 通过父节点删除子节点
如果不便于获取父节点引用，也可以通过删除节点的parentNode.(即子节点.parentNode.removeChild(子节点))

创建属性

通getAttribute()方法可以获取元素属性值，当然setAttribute(要添加的属性，属性值)方法也可以通过创建属性并赋值。

Linleslie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遍历DOM

遍历DOMDOM（文档对象模型）是一种父子关系层次树结构，构成当前web页面模型，最顶层的对象是window对象，document是它的子对象之一。当web页面加载完成后，浏览器就具有了完整层次化的DOM来表示页面内容。注意：只有当页面加载完成后，DOM才是可用的，在这之前，执行DOM语句，会报错。 <!doctype html> <html>
复制链接

扫一扫