javaScript DOM 获取 （ID 标签 类名 节点 元素 添加 删除 替换）

DOM

获取id

var btn = document.getElementById("btn")
			console.log(btn)

根据指定标签信息获取元素对象的集合 返回:数组

var button = document.getElementsByTagName("button")
		console.log(button)

根据指定class信息获取元素对象，返回:数组

	var c1 = document.getElementsByClassName("c1")
		console.log(c1)

根据指定name信息获取元素对象，返回:数组

var btn1 = document.getElementsByName("btn1")
	console.log(btn1)

获取body标签

var body = document.getElementsByTagName("body")[0]
		console.log(body)

获取html根标签

var html = document.documentElement;
	console.log(html)

获取页面中的所有元素

 var all = document.all
	console.log(all)

一个

 var q = document.querySelector(".c1")
	console.log(q)

多个

 var q1 = document.querySelectorAll(".c1")
	console.log(q1)
	console.log(q1[0])

获取ul下所有的子元素

var children1 = ul.children
	console.log(children1)

获取ul下所有的子节点

var children2 = ul.childNodes
	console.log(children2)

获取ul的父节点

var parent1 = ul.parentNode
	console.log(parent1)

获取ul的父元素

var parent2 = ul.parentElement
	console.log(parent2)

获取ul的第一个子节点

var first1 = ul.firstChild
	console.log(first1)

获取ul的第一个子元素

var first2 = ul.firstElementChild
	console.log(first2)

获取ul的上一个兄弟节点

var brother1 =  ul.previousSibling
	console.log(brother1)

获取ul的下一个兄弟节点

var brother2 =  ul.nextSibling
	console.log(brother2)

获取ul的上一个兄弟元素

var brother3 =  ul.previousElementSibling
	console.log(brother3)

获取ul的下一个兄弟元素

var brother4 =  ul.nextElementSibling
	console.log(brother4)

创建一个元素

var p = document.createElement("p")
	console.log(p)

创建一个新的文本节点

var text = document.createTextNode("erhuo")
	console.log(text)

给p标签添加一个节点

p.appendChild(text)

将p添加到li之前

ul.insertBefore(p,li)

将li元素删除

ul.removeChild(li)

替换

ul.replaceChild(p,li2)