Javascript第七天

一、获取文档对象（续）

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("你干嘛点我！");

      })