JavaScript学习笔记—DOM之元素节点

元素节点对象（element）

• 在网页中，每一个标签都是一个元素节点

1. 通过document来获取已有的元素节点：

• document.getElementById()：根据id获取一个元素节点对象
• document.getElementsByClassName()：根据元素的class属性值获取一组元素节点对象，返回的是一个类数组对象，返回的结果是一个实时更新的集合（当网页中新添加元素时，集合也会实时的刷新）
• document.getElementsByTagName()：根据标签名获取一组元素节点对象，返回的结果是一个实时更新的集合
• document.getElementsByTagName("*") 获取页面中所有的元素
• document.getElementsByName()：根据name属性获取一组元素节点对象，返回的结果是一个实时更新的集合，主要用于表单项
• document.querySelectorAll()：根据选择器去页面中查询元素，会返回一个类数组（不会实时更新）
• document.querySelector()：根据选择器去页面中查询第一个符合条件的元素

2. 创建一个元素节点

• document.createElement()：根据标签名创建一个元素节点对象

3. div元素的原型链

• HTMLDivElement -> HTMLElement -> Element -> Node -> ...

4. 通过元素节点对象获取其他节点的方法

• element.childNodes：获取当前元素的子节点（会包含空白的子节点）
• element.children：获取当前元素的子元素
• element.firstElementChild：获取当前元素的第一个子元素
• element.lastElementChild：获取当前元素的最后一个子元素
• element.nextElementSibling：获取当前元素的下一个兄弟元素
• element.previousElementSibling：获取当前元素的前一个兄弟元素
• element.parentNode：获取当前元素的父节点
• element.tagName：获取当前元素的标签名