DOM
节点通常对应着一个标签,文本或者一个innerHTML
属性。DOM
节点存在nodeType
属性表示当前节点类型。其中标签类型nodeType
为1,属性类型的nodeType
为2,文本类型的nodeType
为3。
一、创建节点
let input1 = document.createElement("input") //创建标签节点
let textNode = document.createTextNode("hello world") //创建文本节点
二、DOM查询
let els = document.querySelector("ele")
let els1 = document.querySelectorAll("ele")
let els2 = document.getElementById("ele")
let els3 = document.getElementsByClassName("ele")
let els4 = document.getElementsByTagName("ele")
三、相对该元素的导航方法
//获取父节点的方法
let parent = document.parentElement
let parent = document.parentNode
//获取子节点的方法
let childs = document.children
//获取第一个标签节点
let eles = document.firstElementChild
//获取第一个元素节点
let eles = document.firstChild
//获取最后一个标签节点
let eles = document.lastElementChild
//获取最后一个元素节点
let eles = document.lastChild
三、DOM更改
//插入子节点
ele.appendChild(el)
//移除子节点
ele.removeChild(el)
//替换子节点
ele.replaceChild(el1,el2)
//插入子节点
parentEle.insertBefore(newEle, referenceEle)
四、属性操作
//获取属性对象
let attrs = divEle.attributes
//获取属性
let attr = divEle.getAttribute(key)
//判断某一个属性是否存在
let hasAttr = divEle.hasAttribute(key)
//移除某一个属性
divEle.removeAttribute(key)