JS的基礎DOM操作-選取父子級元素、動態生成元素、修改元素、Classlist

一、選取父級、子級元素

<div id='father' style="width: 200px;height: 200px;">
　　<div id='son' style="width: 100px;height: 100px;"></div>
</div>

1、ParentNode（選取父級元素）

語法：子元素.parentNode;

<script>
　　son.parentNode.style.backgroundColor ="yellow";
　　son.style.backgroundColor="red";
</script>

 

2、Children （選取子級元素）

語法：父元素.children；獲取到的是一個偽數組。使用的時候需要加上下標，指定子元素。

<script>
     father.children[0].style.backgroundColor="black";
</script>

 

二、元素的增刪改

1、creatElement（生成元素）

    <script>
       var oInput = document.createElement('input');
       //在內存中生成這個元素
       oInput.type= "button";
       oInput.value="這是一個按鈕";
       //給這個元素賦上屬性
       document.body.appendChild(oInput);
       //在body尾部插入我們定義好的oInput
    </script>

 

2、appendChild（尾部插入元素）

語法：父級元素.appendChild(需要插入的子元素)

document.body.appendChild(oInput);

 

3、insertBefore（指定位置插入元素）

語法：父級元素.insertBefore（需要插入的元素，插在哪個元素前邊）

 document.body.insertBefore(oInput,div1);

 

4、replaceChild（替換元素）

語法：父級元素.replaceChild（需要替換的元素，被替換的元素）

document.body.replaceChild(oInput,div1);

 

5、removeChild（刪除元素）

語法：父級元素.replaceChild（要刪除的子元素）

 document.body.removeChild(div1);

需要注意的是，removeChi如果想要刪除自身元素並且不知道父元素，可以用parentNode選取父元素后再選擇自己。

div1.parentNode.removeChild(div1);

 

6、innerHTML（獲取父級元素底下的全部標簽）

語法：父級元素.innerHTML

console.log(div1.innerHTML);
//獲取div1下面的所有便簽

需要注意的是，修改innerHTML時，會將原有的元素清空，再重新賦值一遍，原有的元素綁定的事件將不再生效。

    <div id="div1">
        <div id="div2">
            12321
        </div>
    </div>

    <script>
       div2.onclick = function(){
　　　　//div2是div原有的子元素
           alert("onclick");
       }
       div1.innerHTML += `<span>新的span標簽</span>`;
　　　　//此時div2的onclick事件失效
    </script>

 

三、修改元素的屬性

1、setAttribute（設置元素屬性）

語法：元素.setAttribute（'屬性'，'值'）

 div1.setAttribute('name','divName');

 

2、getAttribute(獲取元素屬性)

console.log(div1.getAttribute('id'));
//控制台打印div1的id值，一般常見的屬性可以不用getAttribute就直接獲取

 

3、removeAttribute（刪除元素屬性）

語法：元素.removeAttribute('屬性')

 div1.removeAttribute('id');

 

4、hasAttribute（檢測元素屬性）

語法：元素.hasAttribute('屬性')，如果有這個屬性，返回true，沒有返回false

console.log(div1.hasAttribute('id'));

 

四、操作元素的Class

1、className（獲取類）

語法：元素.className，如果給它賦值就會覆蓋原本的class，不賦值的話，它會返回元素class屬性的值。

console.log(div1.className);

 

2.classList（類列表）

語法：

1、元素.classList.add('類名')

div1.classList.add('box1');//添加一個類

2、元素.classList.remove('類名')

div1.classList.remove('box1');//刪除一個類

3、元素.classList.contains('類名')

div1.classList.contains('box1');//檢測類列表中有沒有指定的類，有返回true，沒有返回false

4、元素.classList.toggle('類名')

div1.classList.toggle('box1');//切換一個類，有就刪除，沒有就添加。