文档对象模型DOM

最新推荐文章于 2021-06-06 23:16:56 发布

原创最新推荐文章于 2021-06-06 23:16:56 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML文档节点的概念，包括节点属性、方法及如何访问指定节点，通过实例展示了DOM操作的基本步骤。

一、文档节点（最顶层的节点或者说根节点）

二、节点属性和方法

1.firstChild : 指向在c

hildNodes列表中的第一个节点

2.lastChild : 指向在childNodes列表中的最后一个节点

3.childNodes : 所有子节点列表

4. previousSibling : 指向前一个兄弟节点，如果这个节点就是第一个兄弟节点，那么该值为null

5. nextSibling : 指向后一个兄弟节点，如果这个节点就是最后一个兄弟节点，那么该值为null

6.appendChild(node) : 将node添加到childNodes的末尾

7.removeChild(node) : 从childNodes中删除node

8.replaceChild(newnode， oldnode) : 将childNode中的oldnode替换成newnode

9.insertBefore（newnode， refnode）：将childNode中的refnode之前插入newnode

三、访问指定节点

1.getElementsByTagName（）方法：根据元素名称获取所有元素的数组

2.getElementByName（）方法：用来获取所有name属性等于指定的元素

3.getElementById（）方法：返回id特性等于指定值的元素

部分代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>节点</title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="first">
    <div id = "chaochao" name = "wangchao" style="color: red">节点</div>
    <div>wenqiang</div>
</div>
<p name = "20"> 20</p>
<span id = "wj">送</span>
<p id="haha">哈哈</p>
</body>
<script type="text/javascript">
  /*  var chaochaoDiv = document.getElementById("chaochao");
     chaochaoDiv.setAttribute("class", "bold");//新增属性
     chaochaoDiv.setAttribute("id", "wengqiang");//覆盖旧的属性
     var divObj = document.getElementsByTagName("div");//取得body元素

    alert(pObj.nodeValue);
*/

    /*var pObjs = document.getElementsByName("20");
    alert(pObjs[0].innerHTML);

    var spanObjs = document.getElementById("wj");
    alert(spanObjs.innerHTML);//textContext*/

   /* var firstDiv = document.getElementById("first");//id为first的
    var firstchildDiv = firstDiv.firstElementChild;//id为first的第一个节点
    alert(firstchildDiv.textContent);//取出“节点”*/

    var pObj = document.createElement("p");
    var textObj = document.createTextNode("呵呵");
    pObj.appendChild(textObj);
    var hahaP = document.getElementById("haha");
    hahaP.appendChild(pObj);
</script>
</html>