JS的基础DOM操作-选取父子级元素、动态生成元素、修改元素、Classlist

一、选取父级、子级元素

<div id='father' style=" 200px;height: 200px;">
　　<div id='son' style=" 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');//切换一个类，有就删除，没有就添加。