JavaScript：获取父节点 CSS样式 DOM节点 (类型、名称、节点值) 兄弟节点子节点设置和修改CSS样式

最新推荐文章于 2024-05-15 18:00:00 发布
ClementQL
最新推荐文章于 2024-05-15 18:00:00 发布
阅读量4.2k
点赞数
分类专栏： JavaScript 前端文章标签： JavaScript
本文链接：https://blog.csdn.net/cql_k21/article/details/86748414
版权
前端同时被 2 个专栏收录
129 篇文章 1 订阅
订阅专栏
JavaScript
38 篇文章 0 订阅
订阅专栏

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GainNode</title>
    <style>
    #demo567{
        height:180px;
        width:250px;
        padding:0px 10px 10px 10px;
        border:1px solid #ccc;
        background-color:#ededed;
    }
    #demo567 div{
        height:50px;
        width:250px;
        margin-top:10px;
        text-align:center;
        line-height:50px;
        background-color:#ccc;
    }

    #demo1{
	    height:180px;
	    width:250px;
	    padding:0px 10px 10px 10px;
	    border:1px solid #ccc;
	    background-color:#ededed;
	}
    #demo1 div{
	    height:50px;
	    width:250px;
	    margin-top:10px;
	    text-align:center;
	    line-height:50px;
	    background-color:#ccc;
	}

    #demo2{
	    height:230px;
	    width:250px;
	    padding:0px 10px 10px 10px;
	    border:1px solid #ccc;
	    background-color:#ededed;
	}
    #demo2 div{
	    height:50px;
	    width:250px;
	    margin-top:10px;
	    text-align:center;
	    line-height:50px;
	    background-color:#ccc;
	}

    #demo{
        height:210px;
        width:250px;
        padding:0px 10px 10px 10px;
        border:1px solid #ccc;
        background-color:#ededed;
    }
    #demo div{
        height:50px;
        width:250px;
        margin-top:10px;
        text-align:center;
        line-height:50px;
        background-color:#ccc;
    }

    #demo11{
        height:180px;
        width:250px;
        padding:0px 10px 10px 10px;
        border:1px solid #ccc;
        background-color:#ededed;
    }
    #demo11 div{
        height:50px;
        width:250px;
        margin-top:10px;
        text-align:center;
        line-height:50px;
        background-color:#ccc;
    }

    #demo_div,#demo_p,#demo_h5{
	    height:60px;
	    width:210px;
	    padding:0px;
	    margin:12px 0px 0px 0px;
	    background-color:#CCC;
	    line-height:60px;
	    text-align:center;
    }

    #demo24 div{
	    height:100px;
	    width:450px;
	    padding:0px;
	    margin:12px 0px 0px 0px;
	    background-color:#CCC;
	    line-height:100px;
	    text-align:center;
    }
    #demo24 div div{
	    height:30px;
	    width:200px;
	    margin:auto;
	    margin-top:0px;
	    background-color: #9CC;
	    line-height:30px;
	}

    #demo212{
        height:50px;
        width:250px;
        margin-top:10px;
        text-align:center;
        line-height:50px;
        background-color:#ccc;
    }

    </style>
</head>
<body>
    @*获取父节点*@
    <div>
        <div id="demo223" style="height:50px;width:250px;text-align:center;line-height:50px;background-color:#ccc;">
        点击这里获取父节点</div> 
    </div>
    <br /><br /><br />
    @*获取 id="demo" 的节点的所有元素子节点*@
    <div id="demo567">
        <div>
        子节点一</div>
        <div>
        子节点二</div>
        <div>
        子节点三</div>
    </div>
    <br /><br /><br />
    @*获取第一个子节点*@
    <div id="demo1">
        <div>子节点一</div>
        <div>子节点二</div>
        <div>子节点三</div>
    </div>
    <br /><br /><br />
    @*获取第一个子节点修改代码*@
    <div id="demo2">
        <div>子节点一</div>
        <div>子节点二</div>
        <div>子节点三</div>
    </div>
    <br /><br /><br />
    @*获取上一个节点*@
    <div id="demo">
        <div name="preNode">上一个节点</div>
        <div id="thisNode">当前节点（点击这里）</div>
        <div name="nextNode">下一个节点</div>
    </div>
    <br /><br /><br />
    @*获取上一个节点修改代码*@
    <div id="demo11">
        <div name="preNode">上一个节点</div>
        <div id="thisNode11">当前节点（当前节点）</div>
        <div name="nextNode">下一个节点</div>
    </div>
    <br /><br /><br />
    @*获取元素节点和文本节点的类型值：*@
    <div id="demo1234" style="height:100px; width:300px; line-height:100px; text-align:center; background-color:#CCC;">
    点击这里显示节点类型</div>
    <br /><br /><br />
    @*节点名称*@
    <div id="demo222" style="height:100px; width:300px; line-height:100px; text-align:center; background-color:#CCC;">
    点击这里显示节点名称</div>
    <br /><br /><br />
    @*获取文本节点的节点值：*@
    <div id="demo3" style="height:100px; width:300px; line-height:100px; text-align:center; background-color:#CCC;">
    点击这里显示文本节点的值</div>
    <br /><br /><br />
    @*获取几个典型的元素节点*@
    <div id="demo">
        <div id="demo_div">我是&lt;div&gt;标签</div>
        <p id="demo_p">我是&lt;P&gt;标签</p>
        <h5 id="demo_h5">我是&lt;h5&gt;标签</h5>
    </div>
    <br /><br /><br />
    @*计算所有<div>标签的个数，并显示它的文本：*@
    <div id="demo24">
        <div>我是第 1 个&lt;div&gt;标签</div>
        <div>我是第 2 个&lt;div&gt;标签</div>
        <div>我是第 3 个&lt;div&gt;标签</div>
        <div style="line-height:30px;">我是第 4 个&lt;div&gt;标签
            <div>我是第 5 个&lt;div&gt;标签</div>
            <div style="margin-top:5px;">我是第 6 个&lt;div&gt;标签</div>
        </div>
    </div>

    @*设置和修改CSS样式*@
    <br /><br /><br />
    <div id="demo212">点击这里改变CSS样式</div>

        @********************************(1)获取父节点**********************************@
        <script>
            @*获取已知节点的父节点请使用 parentNode 。
            语法：nodeObject.parentNode  其中，nodeObject 为节点对象（元素节点）。*@
            @*获取 id="demo"的节点的父节点：*@
            document.getElementById("demo").parentNode;
        </script>
        @*******************************************************************************@


        @********************************(2)获取子节点**********************************@
        <script>
            @*(1)获取所有子节点*@
            @*在Javascript中，可以通过 children 来获取所有子节点。
            children只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但是得到了几乎所有浏览器的支持。
            语法：nodeObject.children
            其中，nodeObject 为节点对象（元素节点），返回值为所有子节点的集合（数组）。
            注意：在IE中，children包含注释节点。*@

            @*获取 id="demo" 的节点的所有子节点：*@
            document.getElementById("demo").children;

            @*自定义一个函数来获取所有元素子节点:*@
            var getChildNodes = function (ele) {
                var childArr = ele.children,
                    childArrTem = new Array();  //  临时数组，用来存储符合条件的节点
                for (var i = 0, len = childArr.length; i < len; i++) {
                    if (childArr[i].nodeType == 1) {
                        childArrTem.push(childArr[i]);  // push() 方法将节点添加到数组尾部
                    }
                }
                return childArrTem;
            }
            @*获取 id="demo" 的节点的所有元素子节点：*@

            @*在W3C规范中，是通过 childNodes 来获取子节点的，它是一个标准属性，
            返回指定元素的子节点的集合，包括HTML节点、文本节点、注释节点等，比 children
            返回的节点类型更加广泛。*@
            @*为了提高代码的兼容性，避免个别浏览器不支持 children 或 childNodes 的情况，可以这样编写代码：*@
            var childArr = ele.children || ele.childNodes

            @*把上面的 getChildNodes() 函数稍作修改：*@
            var getChildNodes = function (ele) {
                var childArr = ele.children || ele.childNodes,
                    childArrTem = new Array();  //  临时数组，用来存储符合条件的节点
                for (var i = 0, len = childArr.length; i < len; i++) {
                    if (childArr[i].nodeType == 1) {
                        childArrTem.push(childArr[i]);
                    }
                }
                return childArrTem;
            }

            @*2.获取第一个子节点*@
            @*在Javascript中，可以通过 firstChild 来获取第一个子节点。
            语法：nodeObject.firstChild   其中，nodeObject 为节点对象（元素节点）。*@
            //IE8.0及其以下版本的浏览器会忽略节点间的空白节点（空格、回车和Tab键），遵循W3C
            //规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为文本节点处理。

            @*3.获取最后一个子节点*@
            @*在Javascript中，可以通过 lastChild 来获取最后一个子节点。
            与 firstChild 一样，IE8.0及其以下版本的浏览器会忽略节点间的空白节点
            （空格、回车和Tab键），遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把
            这些空白作为文本节点处理。*@

            @*判断是否存在子节点*@
            @*在Javascript中，可以通过 hasChildNodes() 方法来判断是否存在子节点。
            语法：nodeObject.hasChildNodes() 其中，nodeObject 为节点对象（元素节点），返
            回值为Boolean类型。IE8.0及其以下版本的浏览器会忽略节点间的空白节点（空格、回车
            和Tab键），遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为
            文本节点处理。文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用
            ChildNodes() 方法返回值永远为false。如果 hasChildNodes() 返回值为false，则
            firstChild、lastChild 的返回值为 null（节点不存在），children、childNodes 返
            回值为空集合（数组长度为 0）。*@
        </script>
        @*******************************************************************************@


        @********************************(3)获取兄弟节点********************************@
        <script>
            @*所谓兄弟节点，是指当前节点的上一个节点或下一个节点。*@
            @*(1)获取上一个节点*@
            @*在Javascript中，通过 previousSibling 来获取上一个节点。
            语法：nodeObject.previousSibling  其中，nodeObject 为节点对象（元素节点）。
            在IE下，会忽略节点间的空白节点（空格、回车和Tab键）；在遵循W3C规范的浏览器
            （Chrome、FireFox、Safari等）下则不会。*@

            @*(2)获取下一个节点*@
            @*在Javascript中，可以通过 nextSibling 来获取下一个节点。与 previousSibling
            相同，在IE下，nextSibling 同样会忽略节点间的空白节点（空格、回车和Tab键）；
            在遵循W3C规范的浏览器（Chrome、FireFox、Safari等）下则不会。*@
        </script>
        @*******************************************************************************@


        @********************************(4)获取节点类型、节点名称、节点值**************@
        <script>
            @*DOM节点信息包括节点类型(nodeType)、节点名称(nodeName)和节点值(nodeValue)*@
            @*节点类型(DOM节点中，每个节点都拥有不同的类型。)*@
            @*W3C规范中常用的 DOM节点类型有以下几种:
            (1)元素节点:每一个HTML标签都是一个元素节点，如 <div> 、 <p>、<ul>等   值:1
            (2)属性节点:元素节点(HTML标签)的属性,如id、class、name等              值:2
            (3)文本节点:元素节点或属性节点中的文本内容                            值:3
            (4)注释节点:表示文档注释,形式为<!--comment text-->                    值:8
            (5)文档节点:表示整个文档(DOM树的根节点,即document)                    值:9*@

            @*(1)节点类型*@
            @*获取节点类型的语法：nodeObject.nodeType   其中，nodeObject 为DOM节点
            （节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性
            节点返回 2 。*@
            @*例如:获取id="demo"的<div>标签的节点类型*@
            document.getElementById("demo").nodeType;//该语句的返回值为 1 。
            @*举例，获取元素节点和文本节点的类型值：*@

            @*(2)节点名称*@
            @*节点名称就是DOM节点的名字，不同类型的节点对应不同的节点名称。*@
            @*(1)元素节点:HTML标签的名称(大写)
            (2)属性节点:属性的名称
            (3)文本节点:它的值永远都是#text
            (4)文档节点:它是指永远是#document*@
            @*获取节点名称的语法：nodeObject.nodeName  其中，nodeObject 为DOM节点（节点对象）。*@
            @*例如，获取id="demo"的<div>标签的节点名称：*@
            document.getElementById("demo").nodeName;

            @*(3)节点值*@
            @*对于文本节点，节点值为文本内容；对于属性节点，节点值为属性的值。
            节点值对于文档节点和元素节点是不可用的。
            获取节点值的语法：nodeObject.nodeValue  其中，nodeObject 为DOM节点（节点对象）。*@
            @*举例，获取文本节点的节点值：*@
        </script>
        @*******************************************************************************@


        @********************************(5)获取DOM节点*********************************@
        <script>
            @*对DOM节点进行操作之前,首先要获取DOM节点:(获取DOM节点的方法有很多，可以根据
            id属性 、 标签名称 获取，也可以获取子节点、父辈节点、上个节点和下个节点。)*@
            @*根据HTML标签的id属性和标签名称来获取节点。*@
            @*(1)getElementById()方法:(根据HTML标签的id属性来获取DOM节点请使用 getElementById()
            方法。该方法返回一个节点对象。
            语法：document.getElementById(id)   其中，id 为HTML标签的 id 属性。)*@
            @*例如,获得id="demo"的节点的语句为*@
            document.getElementById("demo");
            @*该语句的返回值为 [ object HTMLDivElement ](元素节点对象)。*@

            @*getElementsByTagName()方法:根据HTML标签名称来获取DOM节点请使用
            getElementsByTagName( ) 方法。该方法将得到的元素节点作为一个数组返回。
            语法：nodeObject.getElementsByTagName(tagName)  其中,nodeObject为元素节点,
            tagName 为HTML标签的名称。*@
            @*注意：getElementsByTagName() 方法既可以查找整个 HTML 文档中的所有节点，
            也可以查找某个节点的子节点，使用时必须要指定查找范围，即指明 nodeObject 。*@
            @*例如，获得HTML文档中所有的<div>标签：*@
            document.getElementsByTagName("div");
            @*获得id="demo"的标签内部的所有<div>标签：*@
            document.getElementById("demo").getElementsByTagName("div");
            @*getElementById( ) 是 document （根节点）的一个方法，其他元素节点不能使
            用该方法。因为 id 属性在整个HTML文档中是唯一的，因此必须从根节点开始寻找。
            getElementsByTagName() 是所有元素节点的方法，不仅 document（根节点）可以
            使用，其他节点也可以使用。所以，根据HTML标签名称来获取DOM节点不仅可以从 
            document（根节点）开始寻找，还可以从任何其他元素节点开始寻找。*@
        </script>
        @*******************************************************************************@


        @********************************(6)设置和修改CSS样式***************************@
        <script>
            @*JavaScript可以通过DOM来设置和修改节点的CSS样式。
            语法：nodeObject.style.cssProperty=newStyle  其中，nodeObject 为节点对象，
            cssProperty 为CSS属性，newStyle 为CSS属性的值。注意：对于由 “ - ” 分隔的
            CSS属性，要去掉 “ - ” ，并将 “ - ” 后的第一个字母大写。*@
            @*例如：*@
            document.getElementById("demo").style.height = "50px" ;
            document.getElementById("demo").style.border = " 1px solid #ddd ";
            document.getElementById("demo").style.backgroundColor = " #ccc ";
            document.getElementById("demo").style.textAlign = " center ";
        </script>
        @*******************************************************************************@


    @*获取父节点*@
    <script>  
        document.getElementById("demo223").onclick=function(){
            var demoParent=this.parentNode;
            alert(
                "父节点的名称是："+demoParent.nodeName+"\n"+
                "父节点的类型是："+demoParent.nodeType
            );
        }
    </script>

    @*获取 id="demo" 的节点的所有元素子节点*@
    <script>
        var getChildNodes=function(ele){
            var childArr=ele.children,
                childArrTem=new Array();  //  临时变量，用来存储符合条件的节点
            for(var i=0,len=childArr.length;i<len;i++){
                if(childArr[i].nodeType==1){
                    childArrTem.push(childArr[i]);
                }
            }
            return childArrTem;
        }
        document.getElementById("demo567").onclick=function(){
            var childArr=getChildNodes(this);
            alert("元素子节点的个数为："+childArr.length);
        }
    </script>

    @*获取第一个子节点    
    在IE8.0及其以下版本的浏览器中，显示：
    第一个子节点：[object HTMLDivElement]
    第一个子节点的类型是：1
    第一个子节点的名称是：DIV
    在Chrome、Opera、Safari、FireFox下，显示：
    第一个子节点：[object text]
    第一个子节点的类型是：3
    第一个子节点的名称是：#text*@
    <script>
        document.getElementById("demo1").onclick=function(){
            alert(
                "第一个子节点："+this.firstChild+"\n"+
                "第一个子节点的类型是："+this.firstChild.nodeType+"\n"+
                "第一个子节点的名称是："+this.firstChild.nodeName
            );
        }
    </script>

    @*获取第一个子节点修改代码
    在所有浏览器下，显示：
    第一个子节点：[object HTMLDivElement]
    第一个子节点的类型是：1
    第一个子节点的名称是：DIV*@
    <script>
        document.getElementById("demo2").onclick=function(){
            alert(
                "第一个子节点："+this.firstChild.nextSibling+"\n"+
                "第一个子节点的类型是："+this.firstChild.nextSibling.nodeType+"\n"+
                "第一个子节点的名称是："+this.firstChild.nextSibling.nodeName
            );
        }
    </script>
    
    @*获取上一个节点
    在 IE8.0 以下，显示：
    上一个节点的类型是：1
    上一个节点的名称是：preNode
    在Chrome、Opera、Safari、FireFox下，显示：
    上一个节点的类型是：3*@
    <script>
        document.getElementById("thisNode").onclick=function(){
            var preNode=this.previousSibling;
            alert(
                "上一个节点的类型是："+preNode.nodeType+"\n"+
                (preNode.nodeType==1?"上一个节点的名称是："+preNode.getAttribute("name"):"")
            );
        }
    </script>

    @*获取上一个节点修改代码
    在所有浏览器下，显示：
    上一个节点的类型是：1
    上一个节点的名称是：preNode*@
    <script>
        document.getElementById("thisNode11").onclick=function(){
            var preNode=this.previousSibling;
            alert(
                "上一个节点的类型是：1"+"\n"+
                "上一个节点的名称是：preNode"
            );
        }
    </script>

    @*获取元素节点和文本节点的类型值*@
    <script>
        document.getElementById("demo1234").onclick=function(){
            var divType=this.nodeType;
            var textType=this.firstChild.nodeType;
            alert(
                "<div>标签的节点类型是："+divType+"\n"+
                "<div>标签内部文本的节点类型是："+textType
            );
        }
    </script>

    @*获取元素节点名称、文本节点名称和文档节点名称*@
    <script>
        document.getElementById("demo222").onclick=function(){
            var divName=this.nodeName;
            var textName=this.firstChild.nodeName;
            alert(
                "<div>标签的节点名称是："+divName+"\n"+
                "<div>标签内部文本的节点名称是："+textName+"\n"+
                "文档节点的节点名称是："+document.nodeName
            );
        }
    </script>

    @*获取文本节点的节点值：*@
    <script>
        document.getElementById("demo3").onclick=function(){
            alert(this.firstChild.nodeValue);
        }
    </script>

    @*获取几个典型的元素节点*@
    <script>
        function myAlert(ele){
            alert(
                "获取到的元素节点："+ele+"\n"+
                "id属性："+ele.getAttribute("id")+"\n"+
                "节点类型："+ele.nodeType+"\n"+
                "文本内容："+ele.firstChild.nodeValue
            );
        }
        document.getElementById("demo_div").onclick=function(){
            myAlert(this);
        }
        document.getElementById("demo_p").onclick=function(){
            myAlert(this);
        }
        document.getElementById("demo_h5").onclick=function(){
            myAlert(this);
        }
    </script>

    @*计算所有<div>标签的个数，并显示它的文本：*@
    <script>
        var nodeArr=document.getElementById("demo24").getElementsByTagName("div");
        var len=nodeArr.length;
        var nodeStr="";
        for(i=0;i<len;i++){
            nodeStr+="第 "+(i+1)+" 个节点的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
        }
        document.getElementById("demo24").onclick=function(){
            alert(
                "节点个数："+len+"\n\n"+
                "节点文本：\n"+nodeStr
            );
        }
    </script>

    @*设置和修改CSS样式*@
    <script>
        document.getElementById("demo212").onclick=function(){
            this.style.height = " 70px ";
            this.style.lineHeight = " 70px ";
            this.style.backgroundColor = " #000 ";
            this.style.color=" #fff ";
        }
    </script>
</body>
</html>