认识DOM 第一课
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始.
案例：
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function getnum(){ var mynode=document.getElementsByName("myt"); alert(mynode.length); } </script> </head> <body> <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6"> <br /> <input type="button" onclick="getnum()" value="看看有几项？" /> </body> </html>
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
案例：以下为获取的不为空的li标签title值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>getAttribute()</title> </head> <body> <p id="intro">以下为获取的不为空的li标签title值:</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> </html>
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
案例：以下为li列表title的值,当title为空时，新设置值为"WEB前端技术"
<!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"); if (text == "") { Lists[i].setAttribute("title","web前端技术"); document.write(Lists[i].getAttribute("title") + "<br>"); }else{ document.write(text + "<br>"); } } </script> </body> </html>
