JavaScript利用HTML DOM进行文档操作的方法
JavaScript利用HTML DOM进行文档操作的方法:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用DOM创建并添加节点</title> <script type="text/javascript"> function createAndNode(){ /*div标签元素节点*/ var container=document.body.getElementsByTagName("div")[0]; /*创建元素节点对象，元素名即为标签名<p>*/ var pEle=document.createElement("p"); /*创建文本节点对象，文本内容就是参数值*/ var txtOfp=document.createTextNode("这是段落的文字"); /*在元素节点内部添加一个文本节点<p>这是段落的文字*/ pEle.appendChild(txtOfp); /*在div元素节点后面添加新的子节点。<div><p>这是段落的文字*/ container.appendChild(pEle); /*创建一个超链接标签*/ var aEle=document.createElement("a"); /*在元素节点中添加文本节点<a>vip宅男</a>*/ /*创建文本节点*/ var texOfA=document.createTextNode("vip宅男"); aEle.appendChild(texOfA); /*创建一个href属性节点*/ var attrOfA=document.createAttribute("href"); /*将href属性节点设置其属性值*/ attrOfA.nodeValue="http://www.baidu.com/"; /*将属性节点添加到超链接元素节点中，即设置a元素标签的属性节点*/ aEle.setAttributeNode(attrOfA); /*将元素节点a添加到div中*/ container.appendChild(aEle); } /*浏览器窗口加载时调用该方法*/ window.onload=createAndNode; </script> </head> <body> <div></div> </body> </html>修改子节点：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Dom-修改子节点</title> <script> function changeSize(){ var target=document.getElementById("txt_1"); /*设置列的属性值为50*/ target.setAttribute("cols","50"); /*设置行的属性值为6 先访问属性节点集合 然后通过getNamedItem定位属性名*/ target.attributes.getNamedItem("rows").nodeValue="6"; } function changeText(){ var target=document.getElementById("lbl_1"); /*先访问该元素节点的子节点,子节点个数可以是多个，因此用了数组下标访问指定元素。然后通过nodeValue修改其值*/ target.childNodes[0].nodeValue="我的个人简历:"; } </script> </head> <body> <form action="form1"> <label id="lbl_1" for="txt_1">多行文本框的标签文字</label> <textarea id="txt_1" ></textarea> <input type="button" name="btn" value="改变多行文本域的尺寸" onclick="changeSize()"/> <input type="button" name="btn" value="改变标签的文字" onclick="changeText()"/> </form> </body> </html>
删除节点：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM-删除子节点</title> <script type="text/javascript"> function doRemoveNode(){ /*label标签元素节点*/ var targetLbl=document.getElementById("lbl_1"); /*从label元素节点中删除第一个子节点*/ targetLbl.removeChild(targetLbl.firstChild); /*文档元素，通过访问文档元素集合，指定位置元素获得多行文本域*/ var tagetArea=document.documentElement.getElementsByTagName("textarea")[0]; /*文档中第一个form标签元素节点*/ var tagetForm=document.documentElement.getElementsByTagName("form")[0]; /*删除文档中第一个form标签中的textarea*/ tagetForm.removeChild(tagetArea); } </script> </head> <body> <form action="form1"> <label id="lbl_1" for="txt_1">多行文本框的标签文字</label> <textarea id="txt_1" cols="" rows=""></textarea> <input type="button" name="btn" value="删除节点" onclick="doRemoveNode()"/> </form> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>弹出第一行的内容</title> <script type="text/javascript"> function showRow(){ alert(document.getElementById("myTable").rows[0].innerHTML); } </script> </head> <body> <table id="myTable" border="1" width="250px;"> <tr> <td>行1 列1</td> <td>行1 列2</td> </tr> <tr> <td>行2 列1</td> <td>行2 列2</td> </tr> <tr> <td>行3 列1</td> <td>行3 列2</td> </tr> </table> <p><input type="button" onclick="showRow()" value="显示第一行的HTML文本"/></p> </body> </html>先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性:
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。
例子：获取节点长度
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM-获取节点的长度（length）</title> <script type="text/javascript"> function getNum(){ var myNode=document.getElementsByName("myt"); alert(myNode.length); } </script> </head> <body> <input type="text" name="myt" value="1"/> <input type="text" name="myt" value="2"/> <input type="text" name="myt" value="3"/> <input type="text" name="myt" value="4"/> <input type="text" name="myt" value="5"/> <input type="text" name="myt" value="6"/> <p><input type="button" onclick="getNum()" value="看看有几页?"/></p> </body> </html>
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM-方法</title> <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> </head> <body> <form name="input"> <table align="center" width="500px" height="50%" border="1"> <tr> <td align="center" width="100px">学号:</td> <td align="center" width="100px"> <input type="text" id="userid" name="user" onblur="validate()"/> <div id="usermsg"></div> </td> </tr> <tr> <td align="center" width="100px">姓名:</td> <td align="center"> <input type="text" name="name"/> </td> </tr> <tr> <td align="center" width="45%">性别:</td> <td align="center"> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td align="center" width="30%">年龄:</td> <td align="center" width="300px"> <input type="text" name="age"/> </td> </tr> <tr> <td align="center" width="100px">地址:</td> <td align="center" width="300px"> <input type="text" name="addr"/> </td> </tr> </table> </form> <h1 id="myHead" onclick="getValue()">看看三种获取节点的方法</h1> <p>点击标题弹出他的值</p> <p><input type="button" onclick="getElements()" value="看看name为sex的节点有几个?"/></p> <p><input type="button" onclick="getTagElements()" value="看看标签为input的节点有几个?"/></p> </body> </html>
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。