[置顶] JavascriptDOM对象小结
文档对象模型DOM（Document Object Mode）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
例如：
HTML代码分解DOM节点层次图：
元素节点：其中<html>、<body>、<p>都是元素节点；
文本节点：向用户展示的内容，如<li></li>中的Javascript、DOM、CSS等文本成为文本节点；
元素属性：元素的属性，如<a>标签的链接属性href
节点属性：
方法：1、nodeName，返回一个字符串，其内容是给定节点的名字;
a. 元素节点的 nodeName 与标签名相同
b. 属性节点的 nodeName 是属性的名称
c. 文本节点的 nodeName 永远是 #text
d. 文档节点的 nodeName 永远是 #document
2、nodeType，返回一个整数，这个数值代表给定节点的类型；
节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
3、nodeValue,返回给定节点的当前值
a. 元素节点的 nodeValue 是 undefined 或 null
b. 文本节点的 nodeValue 是文本自身
c. 属性节点的 nodeValue 是属性的值
节点树：
方法：1、childNodes,返回一个数组，这个数组由给定元素节点的子节点构成；
2、firstChild，返回第一个子节点；
3、lastChild，返回最后一个子节点；
4、parentNode，返回一个给定节点的父节点；
5、nextSibling，返回给定节点的下一个子节点；
6、previousSibling，返回给定节点的上一个子节点
其中：
1、访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
2、访问子节点第一项和最后一项
firstChild，属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
lastChild，属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
3、访问父节点parentNode
注意父节点只有一个
4、访问兄弟节点
nextSibling ，属性可返回某个节点之后紧跟的节点（处于同一树层级中），如果无此节点，则该属性返回 null。
previousSibling， 属性可返回某个节点之前紧跟的节点（处于同一树层级中），如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略
DOM操作：
方法：1、createElement(element)，创建一个新的元素节点；
2、createTextNode(),创建一个包含着给定文本的新文本节点；
3、appendChild(),指定节点的的最后一个子节点列表之后添加一个新的子节点；
4、insertBefore(),将一个给定节点插入到一个给定元素节点的给定子节点的前面；
5、removeChild()，从一个给定元素中删除一个子节点
6、replaceChild(),把一个给定父元素里的一个子节点替换为另外一个节点
其中：
1、创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName) ,tagName:字符串值，这个字符串用来指明创建元素的类型
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
2、创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)，data：字符串，可规定此节点的文本。
总结完DOM树之后，再来汇总一下方法。
3、插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点，要用到DOM操作中第一个方法。
语法：appendChild(newnode)
4、插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法：insertBefore(newnode,node);
5、删除节点removeChile()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法：nodeObject.removeChild(node)
6、替换节点replaceChile()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
注意：
a. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
b. newnode 必须先被建立。
那么如何进行查询呢？
1、getElementsById()
通过元素的 id属性查询元素
2、getElementsByName()
通过元素的 name 属性查询元素,需要注意两点：1、因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。2、和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
3、getElementsByTagName()
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
注意：1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
这里要区别一下这三种方法，举个例子：
人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox"){
hobby[i].checked="checked"
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox"){
hobby[i].checked=""
}
}
}
function checkone(){
var j=document.getElementById("wb").value;
// document.write(j.value);
var i=parseInt(j);
var hobby=document.getElementsByName("hobby")
hobby[i-1].checked="checked"
}
</script>
</body>
</html>
效果图：
点击全选： 点击全不选：
输入序号：
这里的难点在于document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。
接着介绍,
4、getAttribute()
通过元素节点的属性名称获取属性的值。
注意：
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
例如：
5、setAttribute()
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)，name为要设置的属性名，value为要设置的属性值注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数
例如：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text=Lists[i].getAttribute("title")
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","HTML");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>运行主要结果：