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——返回元素的垂直偏移位置。