DOM操作汇总

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)
上一篇:【QT】QT富文本


下一篇:Ubuntu下使用VS Code创建Spring Boot工程