文档对象模型DOM
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
HTML文档可以说由节点构成的集合，DOM节点有:
1.元素节点：上图中 《html 》、《body》、《p》等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如《li》…《/li》中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如标签的链接属性href=“http://www.imooc.com”。
将HTML代码分解为DOM节点层次图:
节点属性:
遍历节点树:
DOM操作:
1，getElementById（）方法
<body>
<h2 id="con">JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script>
var mychar = document.getElementById("con");
mychar.style.color="red";
</script>
</body>
2，getElementsByName()方法
返回带有指定名称的节点对象的集合。
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
- 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
- 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
<body>
<script type="text/javascript">
function getnum(){
var mynode= document.getElementsByName("myt") ;
alert(mynode.length);
}
</script>
<input name="myt" type="text" value="1"><br/>
<input name="myt" type="text" value="2"><br/>
<input name="myt" type="text" value="3"><br/>
<input name="myt" type="text" value="4"><br/>
<input name="myt" type="text" value="5"><br/>
<input name="myt" type="text" value="6"><br/>
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>`
3，getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:
- Tagname是标签的名称，如p、a、img等标签名。
- 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
<script type="text/javascript">
function getValue()
{
var myH=document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS=document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
</script>
4，区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，
人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
4. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
-
Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
-
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。
方法总结如下:
实例
<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(i = 0;i < hobby.length;i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true; }
} // 全选
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(i = 0;i < hobby.length;i++){
hobby[i].checked = false;}// 全不选
}
function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementById("hobby"+j);
hobby.checked = true; //输入序号选
}
5，getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:
- elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
- name：要想查询的元素节点的属性名字
实例
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
6，setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
实例
<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>
<h2>当title为空时,新设置值为"我最强":</h2>
<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","我最强");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
5，querySelector() 方法
返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
语法：document.querySelector(CSS selectors)
CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器，使用逗号隔开，返回一个匹配的元素。
例子：
1.获取文档中 id="demo" 的元素：
document.querySelector("#demo");
2.获取文档中第一个 <p> 元素：
document.querySelector("p");
3.获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
4.获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
5.获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");
NzIxODMx,size_16,color_FFFFFF,t_70)
二，节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
- nodeName : 节点的名称
- nodeValue ：节点的值
- nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
5. 元素节点的 nodeName 与标签名相同
6. 属性节点的 nodeName 是属性的名称
7. 文本节点的 nodeName 永远是 #text
8. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
9. 元素节点的 nodeValue 是 undefined 或 null
10. 文本节点的 nodeValue 是文本自身
11. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var dd = document.getElementsByTagName("li");
for(var i = 0;i <= dd.length;i++){
document.write(dd[i].nodeName +"<br>");
document.write(dd[i].childNodes[0].nodeValue+"<br>");
document.write(dd[i].nodeType +"<br>");
document.write(dd[i].innerText +"<br>");
}
</script>
1，访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[0].childNodes;
for(i=0;i<x.length;i++){
document.write("节点类型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>");}
2，访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：,node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+"<br>");
document.write(x.lastChild.nodeName+"<br>");
</script>
3，访问父节点parentNode
获取指定节点的父节点
语法：,elementNode.parentNode
注意:父节点只能有一个。
<div id="text">
<p>
parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
4，访问兄弟节点
- nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。 - previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
function get_previousSibling(n)
{
var x=n.previousSibling;
while (x && x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}
</script>
5，插入节点appendChild()，
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
参数:newnode：指定追加的节点
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
var newtext= document.createTextNode("PHP");
newnode.appendChild(newtext);
otest.appendChild(newnode);
</script>
6，插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
<ul id="test">
<li>JavaScript</li>
<li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP" ;
otest.insertBefore(newnode,otest.childNodes[1]);
</script>
7，删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
参数:node ：必需，指定需要删除的节点
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<button onclick="clearText()">清除节点内容</button>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
for(var i=content.childNodes.length-1;i>=0;i--){
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
</script>
8，替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。,
9，创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数:tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。,
10，创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本。
我们来创建一个
<script type="text/javascript">
var element = document.createElement("p");
element.style.backgroundColor='#999999';
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
