DOM模型

作者: Mr_J316 | 来源:发表于2019-04-24 09:59 被阅读0次

2019-04-23

DOM模型的全称是Document Object Module，即文档对象模型。一个HTML文档可以看成结构化的树，文档中的每个标签都是树的结点。

引用DOM结点

直接引用DOM结点

在DOM模型中直接引用结点有以下方式：

document.getElementById：引用指定id的结点

document.getElementsByName：引用指定name的结点，返回值类型为数组。

document.getElementsByTagName：引用指定标记的结点。不必非得用在document上。可以在某个特定元素的子节点中定位。返回值类型为数组。

document.querySelector: 根据指定css规则，返回在页面中找到的第一个匹配元素

document.querySelectorAll: 根据指定css规则返回页面中所有相匹配的元素，返回值类型为数组。

document.getElementsByClassName：根据class名称查找所有元素，返回值类型为数组。

间接引用DOM结点

引用子结点

每个结点都有childNodes属性，表示该结点的所有子结点。这些子结点按照在文档中出现的顺序排列，可通过索引访问。

if(document.getElementById("d1").hasChildNodes()){
       var arr = document.getElementById("d1").childNodes;
       for(let i=0;i<arr.length;i++){
          arr[i].src="images/photo.gif";
       }
    }

删除因排版问题而产生的空白节点

function clearWhitespace(element){
    for (let i = 0; i < element.childNodes.length; i++) {
        let node = element.childNodes[i];
        //判断是否是空白文本结点(nodeType返回3为文本结点), 是则删除
        // nodeType 1:元素节点  2：属性节点  3：文本节点
        if (node.nodeType == 3 && /\s/.test(node.nodeValue)) {  // \s是空白字符
            node.parentNode.removeChild(node);
        }
    }
}
clearWhitespace(document.getElementById("d1"));

firstChild：第一个子结点

document.getElementById("d1").firstChild.src ="images/photo.gif";

lastChild：最后一个子结点

document.getElementById("d1") .lastChild.src ="images/photo.gif";

引用父结点

parentNode

obj.parentNode.style.backgroundColor = "green";//获取obj元素的父元素

引用兄弟结点

nextSibling：引用下一兄弟结点

obj.nextSibling.style.background = "red";

previousSibling：引用上一兄弟结点

obj.previousSibling.style.background = "green";

操作DOM结点

获取结点名称 nodeName

用于返回节点的标记名称，与tagName属性相同。

获取结点类型 nodeType

对应3种类型的结点，nodeType以数字形式返回其类型：1-元素结点 2-属性结点 3-文本结点

获取结点值 nodeValue

不同类型结点有不同的返回值：

元素结点：返回null;
属性结点：返回undefined;
文本结点：返回文本内容。

nodeValue属性可以看作是专门为文本结点所设置的。可用于读写文本内容。

<body>
    <div id="d1">hello</div>
    <script type="text/javascript">
        var d1 = document.getElementById("d1");
        alert(d1.nodeValue);//返回null
    </script>
</body>
---------------------------------------------------------------------------------------------------
<body>
    <div id="d1">hello</div>
    <script type="text/javascript">
        var d1 = document.getElementById("d1");
        alert( d1.firstChild.nodeValue ); //返回hello
    </script>
</body>

读写结点属性

语法格式一：元素结点.属性名称

<img id="img1" src= "images/photo.gif" />
<script type="text/javascript">
    var imgNode = document.getElementById("img1");
    alert(imgNode.src);              //读取src属性
    imgNode.src = "images/001.jpg"   //设置src属性
</script>

语法格式二：

setAttribute(属性名称,属性值);

getAttribute(属性名称);

<img id="img1" src= "images/photo.gif" />
<script type="text/javascript">
    var imgNode = document.getElementById("img1");
    alert(imgNode.getAttribute("src"));             //读取src属性
    imgNode.setAttribute("src", "images/001.jpg");  //设置src属性
</script>

说明：使用setAttribute()时，如果指定属性已经存在，它的值将被刷新；如果不存在，方法将先创建它再为其赋值。

处理结点内容

要获取一个结点内容有以下方法：

innerHTML属性

innerText属性（firefox支持textContent属性）

nodeValue属性

通过DOM结点改变文档结构

创建结点

1.创建元素结点

语法格式：document.createElement(结点名称);

返回指向新建节点的引用指针

2.创建文本结点

语法格式：document.createTextNode(text);

text是要创建的文本结点中的文本值

3.添加结点

创建结点后，可以使用appendChild方法将其添加到文档层次结构中，成为指定父结点的最后一个子结点。

语法格式：父结点.appendChild(新结点);

function createNode(){
        var divObj = document.createElement("div");//创建元素节点
        divObj.style.width="100px";
        divObj.style.height="100px";
        divObj.style.border="1px solid blue";
        divObj.style.color = "red";

        var txt = document.createTextNode("hello world"); //创建文本节点
        divObj.appendChild(txt);    //添加文本节点
        document.body.appendChild(divObj);     //添加元素节点
   }

插入结点

使用insertBefore方法插入子结点

appendChild方法只能将结点添加到所有的子结点之后，而insertBefore方法则可以将结点插入到指定结点之前。

语法格式：父结点.insertBefore(新结点,原结点);

说明：新结点插入到原结点之前的位置

替换结点

使用replaceChild方法替换结点

将一个结点用另外一个结点来取代

语法格式：父结点.replaceChild(新结点,原结点);

说明：用新结点替换原结点，并返回被替换掉的结点，此时这个结点已经不存在于文档中。

复制结点

使用cloneNode方法复制结点

语法格式：结点.cloneNode(true|false);

说明：

true表示克隆整个结点，false表示只克隆结点标记，里面的子结点不克隆。
返回值是复制得到的新结点。
如果克隆后的结点与原结点id一样，不要忘记用 setAttribute("id" , "new_id") 改变新节点的ID。

删除结点

使用removeChild方法删除子结点

语法格式：父结点.removeChild(子结点);

说明：

方法返回被删除的子结点的引用。
某个节点被removeChild方法删除时，这个节点所包含的所有子节点将同时被删除。

表格操作

table表格对象

类别	名称	描述
属性	rows[]	返回包含表格中所有行的一个数组
方法	insertRow(index)	在表格中插入一个新行。新行将被插入 index 所在行之前。<br />若 index 等于表中的行数，则新行将被附加到表的末尾。
	deleteRow(index)	从表格中删除一行

tableRow表格行对象

类别	名称	描述
属性	cells[]	返回包含行中所有单元格的一个数组
	rowIndex	返回该行在表中的位置
方法	insertCell(index)	在一行中的指定位置插入一个空的`<td>`标签。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。
	deleteCell(index)	删除行中指定的单元格

tableCell单元格行对象

名称	描述
cellIndex	返回单元格在某行单元格集合中的位置
innerHTML	设置或返回单元格的开始标签和结束标签之间的HTML
align	设置或返回单元格内部数据的水平排列方式
className	设置或返回元素的class属性

网友评论

本文标题：DOM模型

本文链接：https://www.haomeiwen.com/subject/wljwgqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！