js中擷取父節點,兄弟節點及處理屬性節點

最後更新：2016-08-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function getDom01(){
            var div = document.querySelector(".box");

            //得到屬性 class屬性
            console.log(div.className);
            //得到的是值
            console.log(div.getAttribute("class"));
            //得到集合
            var attrs = div.attributes;
            for(var i=0;i<attrs.length;i++){
                var attr = attrs[0];
                console.log(attr.value);
            }

            console.log("--------------------");
            console.log(div.nodeName);
            console.log(div.nodeType);
            console.log(div.nodeValue);

            //console.log(div)
        }

        function setAttr(){
            var div = document.querySelector(".box");
            div[‘test‘] = "ttttt";
            //設定屬性的值
            div.setAttribute("testtest","tttttt");
            //div.setAttribute("name","divdiv");
            div.name = "divdiv";
            div.removeAttribute("name");
        }

        function setTextText(){
            var div =  document.querySelector(".box");
            //console.log(div.textContent)
            console.log(div.innerHTML);
            //改變文本裡面的額內容
            div.innerHTML = "<h1>this is a innerHTML test</h1>";
        }

        /**
         *
         *                  元素節點            屬性節點            文本節點
         *
         * NodeName          元素名             屬性名稱              #text
         *
         * NodeType            1                2                   3
         *
         * NodeValue          null             屬性值             常值內容
         *
         */

        //得到所有的子項目
        function getChilds(_parent){
            var childs = [];
            if(_parent){
                var child = _parent.childNodes;
                for(var i=0;i<child.length;i++){
                    var c = child[i];
                    if(c.nodeType === 1){
                        childs.push(c);
                    }
                }
            }
            return childs;
        }

        function testGetChilds(){
            var childs = getChilds(document.querySelector(".box"));
            console.log(childs)
        }
        /**
         *  通用的得到上一個下一個元素
         */
        function getSibling(_dom,sibling){
            if(_dom){
                sibling = sibling || "nextSibling";
                _dom = _dom[sibling];
                while(_dom && _dom.nodeType != 1) {
                    _dom = _dom[sibling];
                }
                return _dom;
            }
            return null;
        }

        //得到同級的下一個元素
        function getNextSibling(_dom){
            if(_dom){
                _dom = _dom.nextSibling;
                while(_dom.nodeType != 1){
                    _dom = _dom.nextSibling;
                }
                return _dom;
            }
            return null;
        }

        function testGetSibling(){
            console.log(getSibling(document.querySelector(".box"),"previousSibling"))
        }
        //擷取上一個節點
        function getPreviousSibling(_dom){
            return getSibling(_dom,"previousSibling");
        }

        function testStyle(){
            var div = document.querySelector("#box2");
            div.style.border = "1px solid red";
        }
        function testStyle1(){
            var div = document.querySelector("#box2");
            //改變樣式的注意事項
            //當不是一個規則單詞的時候
            div.style.border = "none";
            //用中括弧賦值
            div.style["margin-left"] = "10px";
            //滿足駝峰命名
            div.style.marginRight = "20px";
        }

    </script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01"/>
<input type="button" onclick="setAttr()" value="setAttr"/>
<input type="button" onclick="setTextText()" value="setTextText"/>
<input type="button" onclick="testGetChilds()" value="testGetChilds"/>
<input type="button" onclick="testGetSibling()" value="testGetSibling"/>
<input type="button" onclick="testStyle()" value="testStyle"/>
<input type="button" onclick="testStyle1()" value="testStyle1"/>
<hr/>
<div class="box" name="div">
    <div id="box1" style="">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box2">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box3">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box4">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
</div>
</body>
</html>

js中擷取父節點,兄弟節點及處理屬性節點

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More