javascript---28--DOM文檔對象模型

節點

什麼是節點

你好是文本節點
<div>元素節點
class id value是屬性節點
註釋節點

獲取節點

ele.childNodes獲取元素節點+ 文本節點但是隻獲取子代不能獲取孫子代

<div id="wrap">
        <div class="position">
            <div id="box">
            你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
        </div>
    </div>
<script>
    var oBox =document.getElementById("box");
    console.dir(oBox);
</script>

結果childNodes:NodeList(7) 有七個其中text有的代表是空格

ele.child只獲取元素節點但是隻獲取子代不能獲取孫子代

console.dir(oBox.children);

HTMLCollection(3)0: span1: p2: ullength: 3__proto__: HTMLCollection

firstChild只獲取第一個節點包括文本節點（空格）和註釋節點空格

console.dir(oBox.firstChild);

結果#text

firstElementChild獲取第一個元素節點

console.dir(oBox.firstElementChild);

結果是span

lastChild只獲取最後一個節點

console.dir(oBox.lastChild);

結果#text

lastElementChild獲取最後一個元素節點

console.dir(oBox.lastElementChild);

結果ul

獲取兄弟節點

nextSibling獲取到的是下一個兄弟節點不換行就是空格

var oSpan =document.getElementsByTagName("span")[0];
    console.dir(oSpan.nextSibling);

結果#text

nextElementSibling獲取兄弟元素節點

console.dir(oSpan.nextElementSibling);

結果是p

console.dir(oSpan.nextElementSibling.nextElementSibling);

結果是ul 可以組合使用

3.previousSibling 獲取上一個兄弟節點包括文本和註釋節點

console.dir(oSpan.previousSibling);

結果#text

previousElementSibling獲取上一個兄弟元素節點

console.dir(oSpan.previousElementSibling);

結果返回null

獲取父節點

parentNode 獲取父節點

console.dir(oSpan.parentNode);

結果是div#box 2.獲取父節點的兄弟節點

<div id="wrap">
        <div class="position">
            <div id="box">你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
            <div id="main"></div>
        </div>
    </div>
    var oSpan =document.getElementsByTagName("span")[0];
console.dir(oSpan.parentElement.nextElementSibling);

結果div#main

獲取定位父級節點offsetParent) 如果父級沒有定位或者自己沒有定位找的是body

#wrap{
            position: relative;
        }
        #box{
            position: absolute;
        }
 var oBox =document.getElementById("box");
    console.dir(oBox.offsetParent);

結果是div#wrap

獲取子元素的數量

1.childElementCount獲取子元素的個數孫元素不算

console.log(oBox.childElementCount);

結果爲3

刪除節點

removeChild（節點屬性）只能從父級開始刪除不能自己刪除自己

創建節點

createElement 創建元素節點創建完節點可以直接進行dom操作
appendChild 添加節點只能從父級節點開始添加在最後添加節點

<body>
    <div id="wrap">
        <div class="position">
            <div id="box">你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
            <div id="main"></div>
            </div>
        </div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    var oP =document.createElement("p");
    oP.innerHTML ="我是一個p";
    oP.onclick = function(){
        alert(1);
    }
    oBox.appendChild(oP)
</script>

創建文本節點 createTextNode

var text = document.createTextNode("我很好");
 oBox.appendChild(text);

與oBox.innerHTML +="我很好";效果一樣但是這樣做之前綁定的事件會失效

替換節點replaceChild 前面（第一個）是新的元素，後面是舊節點

var oBox =document.getElementById("box");
    var oSpan =document.getElementsByTagName("span")[0];
    var oSpan2 =document.createElement("span");
    oSpan2.innerHTML ="我是新的";
    oBox.replaceChild(oSpan2,oSpan);

這樣22就替換成我是新的

添加節點但是不替換insertBefore 第一個是插入的新元素，後面是那個節點（前添加節點）

var oBox =document.getElementById("box");
    var oSpan =document.getElementsByTagName("span")[0];
    var oSpan2 =document.createElement("span");
    oSpan2.innerHTML ="我是新的";
    oBox.insertBefore(oSpan2,oSpan);

在22前面我是新的

克隆節點 cloneNode() 克隆只克隆元素本身還有元素節點，不會克隆事件括號裏可以接受一個布爾類型，true就是克隆子孫元素

<body>
    <div id="wrap">
    <div class="box">nnn</div>
    </div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.onclick =function () {
        alert(1);
    }
    var oBox2 =oBox.cloneNode();
    oBox2.innerHTML ="我是克隆";
    wrap.appendChild(oBox2)

結果只有點擊nn纔會有彈窗，點擊“我是克隆”沒有彈窗

<body>
    <div id="wrap">
    <div class="box">nnn
        <h2>子孫</h2>
    </div>
    </div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.onclick =function () {
        alert(1);
    }
    var oBox2 =oBox.cloneNode(true);
    wrap.appendChild(oBox2)

結果是nnn 子孫 nnn 子孫內容複製

清除空隙

浮動或變塊
父級字體font-size爲0
加註釋
刪除子代文本節點

<style>
       p{
           display: inline-block;
           width: 100px;
           height: 100px;
           background-color: #ff6666;
       }
    </style>
</head>
<body>
    <p>111</p>
    <p>222</p>
</body>
 var oDiv =document.getElementsByTagName("body")[0];
    for (var i=0;i<oDiv.childNodes.length;;i++){
        if (oDiv.childNodes[i].nodeName==="#text"){
            oDiv.removeChild(oDiv.childNodes[i]);//長度會變childNodes.length;
        }
    }

這樣就刪除空格

節點屬性

getAttribute(節點名稱) 返回的是值

<body>
   <div class="box"></div>
</body>
<script>
   var oBox =document.getElementsByClassName("box")[0];
   console.log(oBox.getAttribute("class"))

結果是box

返回節點對象getAttributeNode

var oBox =document.getElementsByClassName("box")[0];
   console.dir(oBox.getAttributeNode("class"))

設置節點屬性setAttribute setAttributeNode

oBox.setAttribute("name","hu");

就會添加節點名稱

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");//創建節點對象
   attr.value =1;//賦值
   oBox.setAttributeNode(attr);

就會添加節點屬性index=1

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(oBox.nodeName);

結果是div

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(attr.nodeName);

結果是index

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(attr.tagName);

結果是undefined 因爲tagname是元素節點纔有 nodename是所有節點都有

節點類型 nodeType

3 #text 文本節點
8 #comment 註釋節點
1 元素節點（span ul p ）
9 文檔節點

刪除節點屬性removeAttribute

var oBox =document.getElementsByClassName("box")[0];
   oBox.setAttribute("name","hu");
   oBox.removeAttribute("name");

小練習通過節點是唯一的寫點擊添加菜單

<style>
        div{
            float: left;
            width: 200px;
            min-height: 400px;
            padding: 10px;
            margin: 20px;
            border: 1px solid #000;
            text-align: center;
        }
        div h2{
            border-bottom: 1px solid #000;
        }
        div span{
            display: block;
            height: 30px;
            background-color: #000;
            font-size: 16px;
            color: #fff;
            line-height: 30px;
            cursor: pointer;
        }
        div span +span{
            margin-top: 10px;
        }
        div span:hover{
            opacity: .5;
        }
    </style>
</head>
<body>
        <div id="menue">
            <h2>菜單</h2>
            <span>西紅柿炒雞蛋</span>
            <span>爆炒牛肉</span>
            <span>土豆絲</span>
            <span>肉末豆腐</span>
            <span>魚香肉絲</span>
            <span>水煮肉片</span>
        </div>
       <div id="select">
           <h2>已點</h2>
       </div>
</body>
<script>
    var oMenu =document.getElementById("menue"),
        oSelect =document.getElementById("select"),
        oSpan =document.getElementsByTagName("span");
        for (var i=0;i<oSpan.length;i++){
            oSpan[i].onclick =function () {
                this.selectStatu =!this.selectStatu;//取反，一開始沒有定義是undefined,取反之後變爲真
                if (this.selectStatu){
                    oSelect.appendChild(this);
                } else{
                    oMenu.append(this);
                }
            }
        } 
</script>

通過註釋節點添加圖片

<body>
    <div id="hidden">

            <!--
            <div class="pic">
                <img src ="1.jpg">
            </div>
            -->
    </div>
    <div id="box"></div>
</body>
<script>
    document.onclick =function () {
        box.innerHTML =hidden.childNodes[1].nodeValue;
    }

javascript---28--DOM文檔對象模型

節點

獲取節點

獲取兄弟節點

獲取父節點

獲取子元素的數量

刪除節點

創建節點

清除空隙

節點屬性

節點類型 nodeType

小練習通過節點是唯一的寫點擊添加菜單

通過註釋節點添加圖片

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

javascript--39--拓展

javascript第三天---標籤內的屬性和數組

javascript 第七天---運算符

javascript--13---閉包

javascript--第五天---獲取對象的其他方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

javascript---28--DOM文檔對象模型

節點

獲取節點

獲取兄弟節點

獲取父節點

獲取子元素的數量

刪除節點

創建節點

清除空隙

節點屬性

節點類型 nodeType

小練習 通過節點是唯一的寫點擊添加菜單

通過註釋節點 添加圖片

小練習通過節點是唯一的寫點擊添加菜單

通過註釋節點添加圖片