JS中 Element常用属性和常用方法

属性：

1、children 属性，获取当前元素的子元素，它返回一个 HTMLCollection 的集合

let ul = document.querySelector('ul'); //获取父元素 ul
//children：获取当前父元素的子元素
console.log(ul.children[0])

2、parentElement 属性，获取当前元素的父级元素

3、nextElementSibling 属性，获取当前元素的下一个兄弟元素

4、previousElementSibling 属性，获取当前元素的前一个兄弟元素

5、firstElementChild 属性，获取当前元素的第一个子元素，相当于 children[0]

6、lastElementChild 属性，获取当前元素的最后一个子元素

7、className 属性，获取或设置当前元素的class名称

8、classList属性，获取或设置当前元素的class名称，它返回一个DOMTokenList的类数组。这个类数组里面分别有几个常用的方法，用于设置当前元素的class名称

let box = document.querySelector('div')
let result = box.classList

console.log(result.add('div2')); //添加一个class名
console.log(result.value);  //显示当前类名
console.log(result.remove('div1'));  //去掉一个类名
console.log(result.contains('div1'));  //判断是否包含这个类名，返回布尔值
console.log(result.toggle('div2')); //当前存在这个class名则删除，不存在添加。添加时返回true，删除时返回false

方法：

1、createElement("标签名") 方法，根据标签名创建HTML元素

var adu = document.createElement('img')
adu.src='../img/6c3e466feb61f38aed6acfbf8649410.jpg'
//父节点.appendChild(子节点)：给父节点下的子节点添加标签
document.body.appendChild(adu) 

2、父节点.appendChild(子节点)：方法，在当前元素父节点下的子节点后追加一个新的元素

var adu = document.createElement('img')
adu.src='../img/6c3e466feb61f38aed6acfbf8649410.jpg'
let box = document.querySelector('div');
box.appendChild(adu)

3、removeChild(元素) 方法，在当前元素中删除指定的子元素

   let ul = document.querySelector('ul');
    //children：获取当前父元素的子元素
    ul.removeChild(ul.children[1])  //删除了第二个li

4、remove() 方法，删除自身

let ul = document.querySelector('ul');
//children：获取当前父元素的子元素
ul.children[0].remove()  //删除了第一个li

 5、cloneNode(flag?:boolean) 方法

接收一个参数：默认为false，如果为true，不仅克隆自身，还克隆内部的元素

let ul = document.querySelector('ul');
//接收一个参数：默认为false，如果为true，不仅克隆自身，还克隆内部的元素
let ul2 = ul.cloneNode(true)  
document.body.appendChild(ul2)