我们通过原型链发现最终所有的页面元素都会从Element开始,document 则是从 Document 类型开
始的,所以我们现在只用先了解 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)