web前端杂记（1）--JS DOM树操作简记

最新推荐文章于 2022-03-01 21:25:07 发布

邹英杰伦

最新推荐文章于 2022-03-01 21:25:07 发布

阅读量537

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/ZouYingJieLun/article/details/46708019

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

节点的三个属性:
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。

        JS中的DOM操作
一、节点的获取
    1、使用js提供的获取方法直接得到
    getElementById   通过id得到一个节点
    getElementsByTagName  通过标签名获取一组节点，得到的是一个数组
    getElementsByName  通过自定义的name得到节点。通常推荐前两种方式

    2.通过关系获取
        首先得到一个节点，然后通过该节点与其他节点之间的关系得到其他的节点
        parentNode :得到父节点（父）
        childNodes :得到所有的子节点，返回的是一个数组 （子）
        nextSibling :得到下一个节点（弟）
        previousSibling  ：得到上一个节点（兄）
        firstChild  :得到第一个子节点
        lastChild   :得到最后一个子节点
        hasChildNodes() :判断当前节点是否有子节点 
    3.简化方式
     forms  images   all
     document.all:得到所有的节点
     document.images:得到所有的image节点
     document.forms:得到所有的表格节点


二、元素的CRUD
    createElement:创建一个元素
    appendChild:添加一个子节点
    removeChild：删除一个子节点

    //获取属性以及设置属性
    div.setAttribute("class","attrdivbg");
    div.getAttribute("class");
    div.removeAttribute("class");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM树的CRUD</title>
</head>
<body>
        <div id="mydiv">
            <p>默认的段落</p>
        </div>

        <div id="attrdiv">
            我的属性的CRUD
        </div>

        <input type="button" value="给div添加一个p元素" onclick="addEleOne();"/><br/>
        <input type="button" value="给div添加一个p元素【简化innerHTML】" onclick="addEleTwo();"/><br/>
        <input type="button" value="给div添加一个p元素【innerHTML】" onclick="addEleThree();"/><br/>

        <input type="button" value="修改div中第三个p元素的文本" onclick="changeP3();"/><br/>
        <input type="button" value="删除div中最后一个p元素" onclick="removeLast();"/><br/>


        <input type="button" value="给div添加一个class属性" onclick="optionAttr();"/><br/>

        <script>
            // OOP的添加【推荐】
            function addEleOne(){
                // 创建一个元素对象:指定元素的名称即可
                var p = window.document.createElement("p");
                // 创建一个文本对象:指定文本值
                var text = window.document.createTextNode("新段落");
                // 建立关系
                p.appendChild(text);
                // 获取div元素
                var div = window.document.getElementById("mydiv");
                div.appendChild(p);
            }
            function addEleTwo(){
                // 创建一个元素对象:指定元素的名称即可
                var p = window.document.createElement("p");
                p.innerHTML = "新段落2";
                // 获取div元素
                var div = window.document.getElementById("mydiv");
                div.appendChild(p);
            }
            function addEleThree(){
                var div = window.document.getElementById("mydiv");
                div.innerHTML += "<p>我的段落3</p>";
            }

            // OOP的修改
            function changeP3(){
                var div = window.document.getElementById("mydiv");
                // 获取div下面的第三个p元素
                var ps = div.getElementsByTagName("p");
                var p = ps[2];
                if(p){
                    // 有p元素
                    // p.firstChild.nodeValue = '被修改了';
                    p.innerHTML = '<font color="red">被修改了</font>';
                }else{
                    window.alert('对不起,目前没有第三个p元素!');
                }
            }

            // OOP的修改
            function removeLast(){
                var div = window.document.getElementById("mydiv");
                // 判断div是否孩子
                if(div.hasChildNodes()){
                    // 获取当前所有的孩子
                    var chs = div.childNodes;
                    // 获取最后一个孩子
                    var lastChild = chs[chs.length - 1];
                    // 断绝关系
                    div.removeChild(lastChild);
                }else{
                    window.alert('对不起,目前没有已经没有孩子供您删除了....!');
                }
            }

            // 属性的操作：CRUD
            function optionAttr(){
                // 获取div元素
                var div = window.document.getElementById("attrdiv");
                // 添加属性
                div.setAttribute("class","attrdivbg");
                // 获取属性
                var arrValue = div.getAttribute("class");
                window.alert(typeof arrValue);   // string
                window.alert(arrValue);   // attrdivbg
                // 通过简化方式获取属性: 不能直接使用class，因为class是保留字或关键字，因此该属性必须使用className进行获取
                window.alert(div.className);  // attrdivbg
                // Attr  Map.Entry arr1 = value1
                var arrt = div.getAttributeNode('class');
                window.alert(typeof arrt);   // object
                // 获取属性的值请使用nodeValue
                window.alert(arrt.nodeValue);   // attrdivbg
                // 修改属性
                div.setAttribute("class","attrdivcolor");
                // 删除属性
                div.removeAttribute("class");
            }

        </script>

</body>
</html>

邹英杰伦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端杂记（1）--JS DOM树操作简记

节点的三个属性: element.nodeName 返回元素的名称。 element.nodeType 返回元素的节点类型。 element.nodeValue 设置或返回元素值。 JS中的DOM操作一、节点的获取 1、使用js提供的获取方法直接得到 getElementById
复制链接

扫一扫