DOM节点操作

最新推荐文章于 2024-11-07 13:38:59 发布

黄晶谛

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量128

点赞数

分类专栏： # JavaScript&JQuery&Ajax 文章标签： javascript

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/119971772

版权

JavaScript&JQuery&Ajax 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1、DOM的节点操作

获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素的相关节点</title>
</head>
<body>
<div id="dv">
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>

<script type="text/javascript">

    var divObj = document.getElementById("uu");
    var liObj = document.getElementById("three");

    //  父级节点
    console.log(divObj.parentNode);
    //  父级元素
    console.log(divObj.parentElement);

    //  子级节点
    console.log(divObj.childNodes);
    //  子级元素
    console.log(divObj.children);

    //  第一个子节点
    console.log(divObj.firstChild);
    //  第一个子元素
    console.log(divObj.firstElementChild);

    //  最后一个子节点
    console.log(divObj.lastChild);
    //  最后一个子元素
    console.log(divObj.lastElementChild);

    //  某个元素的前一个兄弟节点
    console.log(liObj.previousSibling);
    //  某个元素的前一个兄弟元素
    console.log(liObj.previousElementSibling);

    //  某个元素的后一个兄弟节点
    console.log(liObj.nextSibling);
    //  某个元素的后一个兄弟元素
    console.log(liObj.nextElementSibling);

</script>
</body>
</html>

节点操作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的相关方法</title>
    <style type="text/css">
      div {
        width: 300px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
</head>
<body>
<input type="button" value="在后面追加元素" id="addAfterBtn" />
<input type="button" value="在前面追加元素" id="addBeforeBtn" />
<input type="button" value="删除前面的元素" id="delBeforeBtn" />
<input type="button" value="删除后面的元素" id="delAfterBtn" />
<div id="dv"></div>

<script type="text/javascript">

    var divObj = document.getElementById("dv");
    var count = 0;//  记录按钮的个数

    //  在后面添加元素
    document.getElementById("addAfterBtn").onclick = function (){
      count++;
      var btn = document.createElement("input");
      btn.type = "button";
      btn.value = "按钮" + count;
      divObj.appendChild(btn);
    };

    //  在前面追加元素
    document.getElementById("addBeforeBtn").onclick = function (){
      count++;
      var btn = document.createElement("input");
      btn.type = "button";
      btn.value = "按钮" + count;
      divObj.insertBefore(btn, divObj.firstElementChild);
    };

    //  删除前面的元素
    document.getElementById("delBeforeBtn").onclick = function (){
      divObj.removeChild(divObj.firstElementChild);
    };

    //  删除后面的元素
    document.getElementById("delAfterBtn").onclick = function (){
      divObj.removeChild(divObj.lastElementChild);
    };

</script>
</body>
</html>

2、元素的节点属性

包括nodeType、nodeName和nodeValue。

nodeType 节点的类型
- 1 元素节点
- 2 属性节点
- 3 文本节点
nodeName 节点的名称(标签名称)
nodeValue 节点值
- 元素节点的nodeValue始终是null

3、兼容代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素的兼容性代码</title>
</head>
<body>
<ul id="uu">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<script type="text/javascript">
    /**
     * 根据父元素获取第一个子级元素
     * @param element
     * @returns {ChildNode|(() => (Node | null))|ActiveX.IXMLDOMNode|*}
     */
    function getFirstElementChildByParentElement(element){
        if (element.firstElementChild){
            return element.firstElementChild;
        } else {
            var childEle = element.firstChild;
            while (childEle.nodeType != 1){
                childEle = element.nextSibling;
            }
            return childEle;
        }
    }

    console.log(getFirstElementChildByParentElement(my$("uu")).innerText);

    /**
     * 根据父元素获取最后一个子级元素
     * @param element
     * @returns {ActiveX.IXMLDOMNode|ChildNode|(() => (Node | null))|*}
     */
    function getLastElementChildByParentElement(element){
        if (element.lastElementChild){
            return element.lastElementChild;
        } else {
            var childEle = element.lastChild;
            while (childEle.nodeType != 1){
                childEle = element.previousSibling;
            }
            return childEle;
        }
    }

    console.log(getLastElementChildByParentElement(my$("uu")).innerText);


    function my$(id){
        return document.getElementById(id);
    }

</script>
</body>
</html>