DOM树的使用

访问并更新DOM树的两个步骤

1. 定位到与需要操作的元素的对应节点。

2. 使用它的文本、子元素或属性。

---

1. 访问元素

• 选择单个元素节点

  • getElementById()
  • querySelector()

• 选择多个元素

  • getElementByClassName()
  • getElementByTagName()
  • querySelectorAll()

• 在元素节点之间遍历

  • parentNode
  • previousSibing / nextSibing
  • firstChild / lastChild

---

2. 操作这些元素

---

getElementById()

• 根据指定的id属性值来选择单一元素。

var el = document.getElementById('one');
el.className = 'cool';

//定义一个变量el接收id为“one”的元素，
//并将其class的属性名改为cool

返回访问元素目录

---

querySelector()

• 使用CSS选择器语法，改语法会找到一个或多个元素，但该方法只返回第一个匹配的元素。

---

var el = document.querySelector('li.hot');
el.className = 'cool';

//只改变第一个元素

返回访问元素目录

---

getElementByClassName()

• 根据指定的class属性值选择一个或多个元素。这个方法比 querySelectorAll() 方法速度更快。

var elements = document.getElementsByClassName('hot');
elements.className = 'cool';

//将class属性名为“hot”的去拿不变为“cool”

返回访问元素目录

---

getElementByTagName()

• 选择页面上所有指定标签名称的元素。这个方法比 querySelectorAll() 方法速度更快

var elements = document.getElementsByTagName('li')
elements.className = 'cool';

//将标签为“li”的属性名全部变为"cool"

返回访问元素目录

---

querySelectorAll()

• 使用CSS选择器语法选择一个或多个元素，该方法或返回所有匹配的元素。

var els = document.querySelectorAll('li.hot');
els.className = 'cool';

返回访问元素目录

---

parentNode()

• 找到该元素的父节点

var startItem = document.getElementById('two');
var parent = startItem.parentNode;		//得到该节的父节点

返回访问元素目录

---

previousSibing / nextSibing

• 找到该元素的前一个或后一个兄弟节点

var startItem = document.getElementById('two');
var prevItem = startItem.previousSibling;	//该元素前一个兄弟节点
var nextItem = startItem.nextSibling;		//该元素的后一个兄弟节点


prevItem.className = 'complete';	
nextItem.className = 'cool';		

返回访问元素目录

---

firstChild / lastChild

• 找到当前元素的第一个子节点或最后一个子节点

var startItem = document.getElementsByTagName('ul')[0];
var firstItem = startItem.firstChild;	//该元素的第一个子节点
var lastItem = startItem.lastChild;		//该元素的最后一个子节点

firstItem.className = 'complete';
lastItem.className = 'cool';

返回访问元素目录

---

返回目录