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 // 设置多选框选项是否选择
网友评论