Javascript基础——DOM节点操作
Javascript基础——DOM节点操作
DOM节点操作
DOM：（什么是DOM）
全称是 Document Object Model ，文档对象模型
DOM的基本操作
- 查找HTML元素
document.getElementById(id)——通过元素的id来查找元素，获取的值是element
document.getElementsByTagName(tagName)——通过元素的标签名来查找元素
document.getElementsByClassName(className)——通过元素的类名来查找元素
document.querySelector()——通过查询选择器查找元素
document.querySelectorAll()——通过查询选择器查找元素集合NodeList - 改变HTML元素
element.innerHTML = new html content——改变元素的 inner HTML
innerText——获取元素内容
element.attributes——获取HTML 元素的属性值
element.setAttribute(attribute, value)——改变 HTML 元素的属性值
element.style.property = new style——改变 HTML 元素的样式 - 添加和删除HTML元素
document.createElement(element)——创建HTML元素
document.removeChild(element)——删除HTML元素
document.remove()——删除元素自身
document.appendChild(element)——添加HTML元素
document.replaceChild(element)——替换HTML元素
document.write(text)——写入HTML文档流（会覆盖原来的文档）
DOM的节点导航
element.childNodes：返回元素子节点的 NodeList。
例：var div = document.querySelector(".box")
console.log(div.childNodes)//打印的是box的所有子节点的集合
element.firstChild：返回元素的首个子集。
例：var ul = document.querySelector(“ul”)
console.log(ul.firstChild)//打印元素ul的第一个子节点
element.lastChild：返回元素的最后一个子元素。
element.parentNode：返回元素的父节点
例：var li = document.querySelector(“li”)
console.log(li.parentNode)//打印元素li的父节点
element.nextSibling：返回当前节点的下一个节点。
例：var x = document.querySelector(".x")
console.log(x.nextSibling.nextSibling)
element.previousSibling：返回当前节点的上一个节点``
添加和删除元素
element.appendChild()：向元素添加新的子节点，作为最后一个子节点。
var box = document.querySelector(".box")
var div = document.createElement("div")
div.setAttribute("class","div")
box.appendChild(div)
var ul = document.querySelector(".box ul")
var div = document.createElement("div")
ul.appendChild(div)
element.insertBefore()：在指定的已有的子节点之前插入新节点。
var ul = document.querySelector(".box ul")
var div = document.createElement("div")
ul.insertBefore(div,ul.childNodes[0])
element.cloneNode()：克隆元素。
var ul = document.querySelector("ul")
var li = ul.childNodes[1]
var liClone = li.cloneNode()
ul.appendChild(liClone)
element.removeChild()：从元素中移除子节点。
关于DOM中的Element对象
在HTML的DOM中，Element对象表示HTML元素。以下是Element对象中的元素属性和元素位置、尺寸的获取方法。
元素属性：
element.attributes（返回元素属性的 NamedNodeMap）
var div = document.querySelector("div")
console.log(img.attributes.src.value)
element.className（设置或返回元素的 class 属性）
var div = document.querySelector("div")
console.log(div.className)
element.getAttribute() （返回元素节点的指定属性值）
var div = document.querySelector("div")
console.log(div.getAttribute("class"))
element.setAttribute()（把指定属性设置或更改为指定值）
var div = document.querySelector("div")
div.setAttribute("class","div")
element.id（设置或返回元素的 id）
var div = document.querySelector("div")
console.log(div.id)
element.innerHTML（设置或返回元素的内容）
//获取内容
var div = document.querySelector("div")
console.log(div.innerHTML)
//设置内容
var div = document.querySelector("div")
div.innerHTML = "上山采蘑菇"
element.nodeName（返回元素的名称）
var div = document.querySelector("div")
var n = div.nodeName
console.log(n.toLowerCase())
element.removeAttribute()（从元素中移除指定属性）
var div = document.querySelector("div")
div.removeAttribute("class")
element.style（设置或返回元素的 style 属性）
var div = document.querySelector("div")
div.style.width = "100px"；
div.style.height = "100px"；
element.tagName（返回元素的标签名）
var div = document.querySelector("div")
console.log(div.tagName)
元素位置和尺寸
element.clientHeight——返回元素的可见高度。
element.clientWidth——返回元素的可见宽度。
element.offsetHeight——返回元素的高度。
element.offsetWidth——返回元素的宽度。
element.offsetLeft——返回元素的水平偏移位置。
element.offsetTop——返回元素的垂直偏移位置。