首页 > 代码库 > 关于Javascipt基础6
关于Javascipt基础6
这次主要说DOM 文档对象模型
DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。 DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系。
一、节点 节点（node)
一词来自于网络理论，这代表着网络中一个个的连接点，网络是由节点构成的。
对于html文档也是一样，文档是由节点构成的集合。
1.元素节点 元素节点如 <body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。（可以说是标签元素）
2.文本节点 文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。（可以说是标签里的内容）
3.属性节点 元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在 元素节点当中。（例如id class title等的标签的属性 不是指css的）
二、获取文档对象
1. querySelector() HTML5新加入的方法，通过传入合法的CSS选择器，即可获取符合条件的第一个元素
例：document.querySelector(“#test”); //返回id为test的首个div
2. querySelectorAll() HTML5新加入的方法，通过传入合法的CSS选择器，即可获取所有符合条件的元素，返回对象数组
例：document.querySelectorAll(‘div.foo’)；//返回所有带foo类样式的div元素对象
要注意：使用这上面两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到 期结果。
（这两个是新出的语句 要注意低版本兼容，另外它们的选取原则是css选择器的那种 可以使用（#div>p），(.div>a)这种方式选择）
3.getElementById() 这个方法返回一个与给定id属性值的元素节点相对应的对象。(注意 需要ID)
例：document.getElementById(‘box’);
4.getElementsByTagName() 这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。（也就是按标签来选择）
例：document.getElementsByTagName(‘li’);
5.getElementsByName() 通过 name 获取一个对象数组（通过Name来选择 主要用于表单）
例：document.getElementsByName(‘name’);
二、间接引用节点（有querySelector，都不怎么用了- -）
除了可以直接引用节点，还可以通过节点间的关系来引用相对节点。
1.引用子节点 每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点 的集合。
这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节 点。
例： document.childNodes[0]; //引用文档的根节点
document.childNodes[1].childNodes[0] //引用<head>节点
document.childNodes[2].childNodes[1] //引用<body>节点
除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是： element.firstChild; element.lastChild; 它们分别表示第一个子结点和最后一个子结点。
2.引用父节点
html的节点层次是一个树状结构，除了根节点外，每个节点都仅有一个父节点 ，可以由parentNode属性来引用 element.parentNode; //引用父节点
3.引用兄弟节点 属于同一个文档层次的节点称为兄弟节点，有两个属性可以用于兄弟节点间 引用，分别是：
element.nextSibling; //引用下一个兄弟节点 element.previousSibling; //引用上一个兄弟节点
三、获取节点信息（真扩展 视情况还是有点用的）
在获得一个节点的引用后，有一些方法可以获得该节点的信息。
1.nodeName 获取节点名称
语法： Node.nodeName; 不同的类型的节点，nodeName的返回值有所差异：
元素节点：返回标记名称; 属性节点：返回属性名称; 文本节点：返回文本 #text
2.nodeType 获取节点类型
语法： Node.nodeType;
元素节点：返回 1 属性节点：返回 2 文本节点：返回 3
3.nodeValue 获取节点的值
语法： Node.nodeValue;
元素节点：返回null 属性节点：返回节点值 文本节点：返回文本内容
四、处理属性节点
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);
六、因浏览器而异的空白节点(扩展 空白的节点来源于元素之间的间距 浏览器把这些换行和间隔当成一个空白的空格)
ie浏览器和firefox浏览器对空白节点的处理不同，ie浏览器会忽略这些节点，而Firefox浏 览器则认可这些节点。
处理方法： 1.避免在文档中出现文本节点。
2.在使用前先删除其中的空白节点。
function cleanWhitespace(element)
{ for(var i=0; i < element.childNodes.length; i++)
{ var node = element.childNodes[i]; //判断是否是空白节点，如果是则删除该节点
if(node.nodeType == 3 && !/\S/.test(node.nodeValue){ node.parentNode.removeChild(node); } } }
DOM 总结：
一份文档就是一棵树; 节点分为不同的类型，分别是：元素节点，属性节点，文本节点;
每个节点都是一个对象; getElementById()方法将返回一个对象，该对象对应着文档里的一个元素节点;
getElementsByTagName()方法返回一个对象数组，它们分别对应着文档里的元素节点;
事件
一、什么是事件？ JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的。页面载入完成时, 会触发一个事件。
用户点击按钮时，点击也是一个事件。
常用的事件有: PC端上常用的事件：（这里只是把较常用的列出来而已 具体的还是要上网查）
click 鼠标点击
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移动
mouseout 鼠标离开
移动端端上常用的事件：
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发 touchcancel //手指接触动作取消
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
onorientationchange // 屏幕旋转事件
二、怎样将事情处理程序绑定到特定的事件中？
方法1. 使用HTML标记创建事件处理程序
例：给图片添加点击事件 <img src=http://www.mamicode.com/“01.jpg” onclick="alert(this.src);"/>
方法2：addEventListener() 方法用于向指定元素添加事件句柄
语法： object.addEventListener(EventName,eventHandler);
例1：给document对象添加点击事件 document.addEventListener("click",function(){ alert("你干嘛点我！"); })
今天就到这里了，以上的对象与方法只是一部分而已，一定要好好扩展完整。
关于Javascipt基础6