DOM操作

获取标签#

//1.通过元素的id属性值来获取元素，返回的是一个元素对象
var element = document.getElementById(id_content)
 
//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByName(name_content)
 
//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByClassName(class_content)
 
//4.通过标签名获取元素，返回的是一个元素对象数组
var element_list = document.getElementsByTagName(tagName)

获取/设置标签属性#

//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)
 
//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)

创建节点#

//1.创建一个html的元素，传参是元素类型，例如div、h1-5、a，下以div为例
var element = document.createElement("div")
 
//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)
var text_node = document.createTextNode(text)
 
//3.创建一个属性节点，传参是对应的属性名
var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node)

特别注意第三个，创建属性节点这个方法，要搭配具体的元素，也就是你要先获取某个具体元素element，创建一个属性节点，最后对这个元素添加这个属性节点(setAttributeNode)。

增添节点#

//1.向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)
 
//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

删除节点#

//删除element内的某个节点，传参是节点类型参数
element.removeChild(Node) 

DOM常见的一些属性#

最后是一些常见的DOM属性：

//1.获取当前元素的父节点
var element_father = element.parentNode
 
//2.获取当前元素的html元素型子节点
var element_son = element.children
 
//3.获取当前元素的所有类型子节点，包括html元素、文本和属性
var element_son = element.childNodes
 
//4.获取当前元素的第一个子节点
var element_first = element.firstChild
 
//5.获取当前元素的前一个同级元素
var element_pre = element.previousSibling
 
//6.获取当前元素的后一个同级元素
var element_next = element.nextSibling
 
//7.获取当前元素的所有文本，包括html源码和文本
var element_innerHTML = element.innerHTML
 
//8.获取当前元素的所有文本，不包含html源码
var element_innerTEXT = element.innerText