其他分享
首页 > 其他分享> > DOM概述

DOM概述

作者：互联网

　　文档对象模型（DOM）是针对HTML和XML文档的一个应用程序编程接口（API），它可以将任何HTML或XML文档描绘成一个由多层节点和对象构成的结构集合。DOM1级定义了一个Node接口，该接口由DOM中所有的节点类型实现，如图中Document类型、Element类型等。所有节点使用nodeType来标识它所属类型，其具体信息则由nodeName和nodeValue属性描述。以下面HTML为例：

　

<!DOCTYPE html>    
<!-- 我是注释-->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sample Page</title>
    </head>
    <body>
       <p id="one">Hello World!</p>
    </body>
</html>

 

 

 

 

 

1.访问子节点：

　　每个节点都有一个childNodes属性来访问该节点的子节点，返回的是一个NodeList对象（它是一个类数组对象，并不是Array实例）。NodeList对象是基于DOM结构动态执行查询的结果，每一次访问NodeList都会运行一次基于文档的查询，来获取最新的HTML页面节点树，因此应该尽量减少访问NodeList，可以考虑使用变量将NodeList对象缓存起来。也即它会随着HTML页面的节点层次改变而改变。要注意的是，childNodes属性返回的NodeList会将HTML页面中节点之间的换行符和空白符作为一个文档节点也添加进子节点列表里，看下面示例：

    let child = document.body.childNodes;//获取body节点的子节点
    alert(child.length); //上面HTML页面中body只有一个p子节点，但子节点列表长度显示为3
    let pairs = [];
    for(let i=0;i<child.length;i++){
        let nodeType = child[i].nodeType;
        let nodeName = child[i].nodeName;
        let nodeValue = child[i].nodeValue;
        pairs.push("("+nodeType+")"+nodeName+" = "+nodeValue);
    }
    alert(pairs.join(","));//输出为 (3)#text=[换行符],(1)P=null,(3)#text=[换行符]

 

　　因此引入了children属性，它返回的HTMLCollection对象（也是类数组的 HTML 元素列表（集合））只包含Element类型的子节点。

let child = document.body.children;
let pairs=[];
alert(child.length); //长度显示为1
for(let i=0;i<child.length;i++){
    let nodeType = child[i].nodeType;
    let nodeName = child[i].nodeName;
    let nodeValue = child[i].nodeValue;
    pairs.push("("+nodeType+")"+nodeName+" = "+nodeValue);
}
alert(pairs.join(",")); //输出 (1)P=null

 

2.查找元素

　　　　　　　　该方法根据元素的ID来查找相应元素，若不存在则返回null

　　　　　　　　该方法根据元素的标签名查找所有符合的元素，返回的是一个NodeList（在HTML文档中返回的是HTMLCollection对象）。另外，可以传入"*"作为参数，表示查找整个页面的全部元素

　　　　　　　　该方法是HTMLDocument类型特有的方法，返回带有给定name特性的所有元素的一个NodeList对象。通常，使用该方法来获取具有相同name特性的单选按钮。如下面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
    <script src="test.js"></script>
</head>
<body>
    <ul id="unordered">
        <li><input type="radio" value="red" name="color" id="colorRed">
        <label for="colorRed">Red</label></li>
        <li><input type="radio" value="green" name="color" id="colorGreen">
        <label for="colorGreen">Green</label></li>
        <li><input type="radio" value="blue" name="color" id="colorBlue">
        <label for="colorBlue">Blue</label></li>
    </ul>
</body>
</html>
    let e = document.getElementsByName("color");
    alert(e); //类型为NodeList
    let pairs=[];
    for(let i=0;i<e.length;i++){
        let nodeId = e[i].getAttribute("id"); //获取节点的id，getAttribute()方法用于查找给定属性名的属性，并返回该属性的值
        let nodeValue = e[i].getAttribute("value"); //获取节点的value
        pairs.push(nodeId +" = "+nodeValue);
    }
    alert(pairs.join(" "));//输出为 colorRed=red colorGreen=green colorBlue=blue

 

3.attributes属性：

　　Element类型是使用attributes属性的唯一一个DOM节点类型，该属性包含一个NamedNodeMap集合，以键值对形式（nodeName：nodeValue）存储着节点特性。实际上节点特性也可以看做一个个节点，用Attr类型表示，nodeType=11，它的nodeName就是该特性的标签名，nodeValue是该特性的值。attributes属性在遍历元素特性上很方便，选取上面一个input元素作为示例：

let e = document.getElementById("colorRed");
let pairs=[];
for(let i=0;i<e.attributes.length;i++){
    let attrName = e.attributes[i].nodeName;//这里的nodeName就是某特性的标签名
    let attrValue = e.attributes[i].nodeValue;//nodeValue表示某特性的值
    pairs.push(attrName +" = "+attrValue);
}
alert(pairs.join(", "));//输出 type=radio， value=red， name=color， id=colorRed



 


　　


 


标签：pairs,NodeList,DOM,nodeValue,HTML,let,概述,节点	

来源： https://www.cnblogs.com/evil-shark/p/15980046.html