按节点关系查找

• 节点树
• 一切文本对象都是节点对象，包括空字符串
• 父子关系

elem.parentNode // 获取父节点
elem.childNodes //  获取所有直接子节点
elem.firstChild // 获取第一个子节点
elem.lastChild // 获取最后一个子节点

				

					
				
				

					
				
				

					
				
				

					
				
			

• 兄弟关系

elem.previousSibling // 获取前一个兄弟节点
elem.nextSibling // 获取后一个兄弟节点

				

					
				
				

					
				
				

					
				
				

					
				
			

• 元素树
  • 不收空字符的影响 (IE9+)
  • 父子关系

elem.prentElement // 获取elem的父节点
elem.children // 获得elem的所有直接子节点
elem.firstElementChild // 获取elem的第一子元素
elem.lastElementChild // 获取elem的最后一个子元素

				

					
				
				

					
				
				

					
				
				

					
				
			

• 兄弟关系

elem.previiousElementSibling // 获得elem的前一个兄弟元素 
elem.nextElementSibling // 获取elem的后一个兄弟元素

				

					
				
				

					
				
				

					
				
				

					
				
			

• 注意元素树是节点树的子级

---

按照 HTML 查找

• 按照 id 查找
  • var elem = documeng.getElementById("xxx")
• 按照标签查找
  • var elem = document.getelementsByTagName("xxx")
• 按照 name 属性
  • var elem = document.getElementsByName('name')
• 按照 class 属性
  • javascript var elem = document.getElementByClassName("className")

---

按选择器查找

• 查找一个元素
  • var elem = document.querySelector("选择器")
• 查找多个元素
  • javascript var elem = document.querySelectorAll("选择器")

---

按自定义属性查找

var elem = elem.getAttribute("自定义属性名")
document.getElementsByTagName("a")[0].getAttribute("target") // _blank