一、获取文档对象(续)
1.querySelectorAll()
HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组
例:document.querySelectorAll(‘div.foo’);//返回所有带foo类样式的div元素对象
2.getElementById()
这个方法返回一个与给定id属性值的元素节点相对应的对象。
例:document.getElementById(‘box’);
3.getElementsByTagName()
这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。
例:document.getElementsByTagName(‘li’);
4.getElementsByName()
通过 name 获取一个对象数组
二、处理属性节点
1. getAttribute 获取节点属性值
object.getAttribute(attribute)
例: var a = document.getElementsByTagName(‘a’);
for(var i=0; i<a.length; i++){
alert(a[i].getAttribute(‘title’));
}
2.setAttribute() 设置节点属性值
object.setAttribute(attribute, value)
例:var link = document.getElementById(‘link’);
link.setAttribute(‘title’, ‘链接提示信息’);
三、处理文本节点
1. node.innerHTML
获取该节点下的包含HTML标签的文本内容
例: var body = document.querySelector(‘body’);
alert(html.innerHTML);
2. node.textContent
获取该节点下的纯文本内容
例: var body = document.querySelector(‘body’);
alert(html.textContent);
三、事件
(1)常用的事件有:
PC端上常用的事件:
click 鼠标点击
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移动
mouseout 鼠标离开
移动端端上常用的事件:
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel //手指接触动作取消
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
onorientationchange // 屏幕旋转事件
(2)怎样将事情处理程序绑定到特定的事件中?
方法1. 使用HTML标记创建事件处理程序
例:给图片添加点击事件
<img src=“01.jpg” onclick="alert(this.src);"/>
方法2:addEventListener() 方法用于向指定元素添加事件句柄
语法: object.addEventListener(EventName,eventHandler);
例1:给document对象添加点击事件
document.addEventListener("click",function(){
alert("你干嘛点我!");
})