JavaScript DOM常用操作

JavaScript的DOM操作主要包括：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
• 表单操作：取值和设置相应值。

在操作DOM之前，首先要获取到DOM元素。

1.获取 & 创建DOM元素

document.getElementById() // 因为ID值在html中唯一，所以此方法只能获取一个节点元素
document.getElementsByTagName() // 根据标签获取特点标签元素集合
document.getElementsByClassName() // 根据class值获取元素集合

document.querySelector() // 选择器语法获取符合条件的第一个元素，IE8以下不支持此语法
document.querySelectorAll() // 选择器语法选择符合条件的所有元素集合，IE8以下不支持此语法

element.children // 获取元素下的所有直属子节点，只读属性，实时变化
element.firstElementChild // 获取元素下第一个子节点
element.lastElementChild // 获取元素下最后一个子节点
element.parentElement // 获取元素最近的一层父元素

document.createElement('tag_name') // 创建指定标签的节点

2.更新DOM元素

element.innerHTML = '' // 更新元素内容，可以包含html标签
element.innerText = '' // 更新元素文本内容，不支持html标签

element.style.property = '' // 更新元素样式属性值，property需要更改为驼峰命名

element.className = '' // 更新元素的class名称

element.setAttribute('property_name','value') // 设置标签的属性值

3.添加DOM元素

element.appendChild(element) // 添加节点为最后一个子节点
element.insertBefore(newElement, referenceElement) // 在父元素的指定子节点前面添加子节点

4.删除DOM元素

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);

5.表单操作

input_element.value // 获取text,password,hidden,select类型input的值
input_element.checked // 获取多选框的选项是否勾选，返回值为true / false

input_element.value = 'new_value' // 设置text,password,hidden,select类型input的值
input_element.checked = true / false // 设置多选框选项是否选择