1 .DOM对象 控制HTML元素
HTML文档可以说由节点构成的集合，DOM节点有:
1、元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2、文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、HTML、CSS等文本。
3、属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。*/
节点属性
方法 描述
nodeName 返回一个字符串，其内容是给定节点的名字
nodeType 返回一个整数，这个数值代表给定节点的类型
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
nodeValue 返回给定节点的当前值
遍历节点树
方法 描述
childNodes ：返回一个数组，这个数组由给定元素节点的子节点构成
firstChild：返回第一个子节点
lastChild：返回最后一个子节点
parentNode：返回一个给定节点的父节点
nextSibling：返回给定节点的下一个节点
previousSibling：返回给定节点的上一个节点
DOM操作：
方法 描述
createElement(element)：创建一个新的元素节点
createTextNode()：创建一个包含着给定文本的新文本节点
appendChild()：指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()：将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()：从一个给定元素中删除一个字节点
replaceChild()：把一个给定父元素里的一个子节点替换为另一个节点DOM操作：
getElementsByName()方法 返回带有指定名称的节点对象的集合。
语法：document.getElementsByClassName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法: document.getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
区别getElementByID,getElementsByClassName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
2. DOM对象 控制HTML元素 节点属性
9-5 getAttribute()方法 通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
//访问子节点childNodes
/*访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。*/
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。
如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
3. DOM对象 节点操作
//9-1 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点
语法:appendChild(newnode)
参数: newnode：指定追加的节点。
var parentnode = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "css";
parentnode.appendChild(newnode);
//9-2 插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:newnode: 要插入的新节点。 node: 指定此节点前插入节点。
var parentNode = document.getElementById("test");
var node = document.getElementById("liJS");
var newNode = document.createElement("li");
newNode.innerHTML = "jQuery";
parentNode.insertBefore(newNode,node);
//9-3 删除节点removeChild()
/*removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。*/
var parentNode = document.getElementById("test");
console.log(parentNode.childNodes);
var node = parentNode.childNodes[3];
var x = parentNode.removeChild(node);
document.write("删除节点的内容：" + x.innerHTML);
//9-4 替换元素节点replaceChild()
/*replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法： node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。*/
//9-5 创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
//9-6 创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
参数：data : 字符串值，可规定此节点的文本。
DOM对象 浏览器窗口可视区域大小
/*浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
*/
var w = document.documentElement.clientWidth
|| document.body.clientWidth;
var h = document.documentElement.clientHeight
|| document.body.clientHeight;
document.write("宽：" + w + "px; 高：" + h + "px<br/>");
/*网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。*/
var w = document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h = document.documentElement.scrollHeight
|| document.body.scrollHeight;
document.write("宽：" + w + "px; 高：" + h + "px<br/>");
/*网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;*/
var w = document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h = document.documentElement.offsetHeight
|| document.body.offsetHeight;
document.write("宽：" + w + "px; 高：" + h + "px<br/>");
/*网页卷去的距离与偏移量
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。*/
66
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
