js获取页面元素的方法和触发

获取页面元素的两种方法

一、利用DOM提供的方法获取元素

获取和设置属性（值）

object.getAttribute( ‘属性名’ );

• 有该属性值则返回该属性值，否则返回null

object.setAttribute( ‘属性名’ , ‘属性值’ );

• 设置指定属性的属性值

二、利用结点层级关系获取元素

（1）获取父节点

获取离元素最近的父节点

var box = 	document.querySelector('.box')

// parentNode属性可以返回某结点最近的一个父节

//若无父节点，则返回nul

console.log(box.parentNode);

（2）获取所有子节点

• 标准：parentNode.childNodes

• 返子节点的集合，该集合为即时更新的集合。

• 该集合包含文本节点（比如换行等）和元素节点
  

• 非标准：parentNode.children

• 仅获取子节点中的元素节点，不含有文本节点，无需进行上面的处理

• 虽然是非标准的，但是各种浏览器都可以使用，所以不用担心，尽管使用！

（3）获取第一个、最后一个子节点

• parentNode.firstChild
• 获取第一个节点，不管是文本节点还是元素节点，找不到返回null
  
  
• parentNode.lastChild
• 获取最后一个节点，不管是文本节点还是元素节点 ，找不到返回null

var ol = document.querySelector('ol');
console.log(ol.firstChild); // 返回第一个子节点
console.log(ol.lastChild); // 返回最后一个子节点

• parentNode.firstElementChild
• 返回第一个子元素节点，找不到返回null
• 有兼容性问题，IE9以上才支持
  
  
• parentNode.lastElementChild
• 返回最后一个子元素节点，找不到返回null
• 有兼容性问题，IE9以上才支持
  
  
• 实际开发的写法：既没有兼容性问题，又能返回第一个、最后一个子元素

<ol>
	<li>我是li1</li>
	<li>我是li2</li>
	<li>我是li3</li>
	<li>我是li4</li>
</ol>

var ol = document.querySelector('ol');
console.log(ol.children[0]);   // “我是li1”
console.log(ol.children[3]);   // “我是li4”
// console.log(ol.children[ol.children.length - 1]); // “我是li4”

（4）兄弟节点

• node.nextSibling

• 返回当前元素的下一个兄弟节点，找不到返回null

• 同样，包含所有的节点，比如文本节点等。
  
  

• node.previousSibling

• 返回当前元素的上一个兄弟节点，找不到返回null

• 同样，包含所有的节点，比如文本节点等。
  
  

• node.nextElementSibling

• 返回当前元素的下一个兄弟节点，找不到返回null

• 仅包含所有的元素节点。

• 有兼容性问题，IE9以上才支持
  
  

• node.previousElementSibling

• 返回当前元素的上一个兄弟节点，找不到返回null

• 仅包含所有的元素节点。

• 有兼容性问题，IE9以上才支持
  

三、触发

var butt = document.getElementById('buttom');
butt.onclick = function() {
	console.log('鼠标点击了！');
}