DOM学习笔记（1）

最新推荐文章于 2023-07-27 14:05:10 发布

原创最新推荐文章于 2023-07-27 14:05:10 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

37 篇文章

订阅专栏

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加移除修改页面的一部分。

节点层次

DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点、数据和方法。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定借点为根节点的树形结构。

<html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    </head>
    <body>
    <p>我是楼主</p>
    </body>
</html>

文档节点：文档节点就是每个文档的根节点，上面的例子中，唯一的根节点就是<html>元素，文档元素就是文档的最外层元素，文档中其他的所有元素都包含在文档元素中。每个文档只能有一个文档元素，始终都为<html> 元素

Javascript中所有节点类型都继承自Node类型，因此所有的节点类型都共享着相同的属性和方法。每个节点都有一个nodeType属性，用于表示节点类型

Node.ELEMENT_NODE（1）;
Node.ATTRIBUTE_NODE（2）;
Node.TEXT_NODE（3）
Node.CDATA_SECTION_NODE（4）
Node.ENTITY_REFERENCE_NODE（5）
Node.ENTITY_NODE（6）
Node.PROCESSING_INSTRUCTION_NODE（7）
Node.COMMENT_NDOE（8）
Node.DOCUMENT_NODE（9）
Node.DOCUMENT_TYPE_NODE（10）
Node.DOCUMENT_FRAGMENT_NODE（11）
NODE.NOTATION_NODE（12）

通过比较上面的常量和节点数值我们可以知道一个节点是哪种类型

//常量
if(someNode.nodeType==Node.ELEMENT_NDOE{
    alert("Node is a element");
}
//数值
if(someNode.nodeType==1{
    alert("Node is a element");
}

我们有时候需要知道节点的具体信息，我们就可以使用nodeName和nodeValue这两个属性。这两个值完全取决于节点的类型。对于元素节点，nodeName始终等于标签名，nodeValue都是null。

对于节点来说，他们之间的关系就像一张族谱，就像第一个例子中的，<head>和<body>可以看成 <html> 的子元素，而<html> 又是他们的父元素两个子元素之间又称他们相互为兄弟元素。每一个节点都有一个childNodes属性，其中保存这一个NodeList对象。NodeList是一种类数组对象（可以通过方括号的方法来访问NodeList的值，也有length属性，但是并不是Array的实例），用于保存一组有序的节点，可以通过位置来访问这些节点。它是基于DOM疾结构动态执行查询的结果。但是我们能通过某些方法来将他转换为数组

function convertToArray(nodes){
    var array=null;
    try{
        array=Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array=new Array();
        for(var i=0;i<nodes.length;i++){
            array.push(nodes[i])
        }
    }
    return array;
}

每一个节点都有parentNode属性，指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此他们的parentNode属性都指向同一个节点，并且同一个列表中的节点互为兄弟节点，可以通过previousSibling和nextSilbing属性访问到同一列表的其他节点。列表中第一个节点的previousSibling属性为null，同理最后一个的nextSibling的节点属性为null。

if(someNode.nextSibling==null){
    alert("this node is the last node");
}else if(someNode.previousSibling==null){
    alert("this node is the first node");
}

知道了这些关系，我们就能够去操作节点了，因为关系指针都是只读的，所以DOM提供了一些操作节点的方法。其中，最常用的是appendChild()方法，用于向childNodes列表的末尾添加一个节点，添加完节点后，所有关系指针都会动态更新，appendChild()返回新增节点

    var list=document.getElementsByTagName("li");
    var newNode=document.createElement("p");
    newNode.innerText="jack";
    var ul=document.getElementsByTagName("ul");
    var returnNode=ul[0].appendChild(newNode);
    alert(returnNode==newNode)//true

创建节点

通过使用document.createElement方法可以创建新元素。这个方法只接收一个参数，即要创建的标签名。这个标签名在HTML文档中不分大小写。

var div=document.createElement("div");
//设置ID
div.id="newDiv";
//设置类名
div.className="newClass";

设置完后可以使用insertBefore()，appendChild()等方法将他插入到文档树中，

document.body.appendChild(div);