JavaScript——高级——DOM——节点访问
2015-07-21 00:04
686 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>节点访问 </title> <script type="text/javascript"> /*节点访问: ID: document.getElementById("ID值"); 标签名(TagName): document.getElementsByTagName("小写的标签名"); 会返回给我一个Node对象数组 NAME: document.getElementsByName("name值"); 会返回给我一个Node 对象数组 获取了一个Node对象的时候。 对象.value 可以获取value值 innerHTML 可以设置或者返回 标签的内容体 */ function run() { alert(1010); var ulNode = document.getElementById("aaa"); alert(ulNode); } function run1() { var arr = document.getElementsByTagName("li"); alert(arr.length); for(var x in arr) { alert(arr[x].innerHTML); }; } function run2() { var arr = document.getElementsByTagName("ul"); alert(arr.length); for(var x in arr){ alert(arr[x].innerHTML); } } function run3() { var arr = document.getElementsByName("bb"); alert(arr.length); for(var x in arr){ alert(arr[x].value);} } function run5() { var arr = document.getElementsByTagName("li"); alert(arr.length); alert(arr[0].innerHTML="andriod"); } </script> </head> <body> <ul id="aaa"> <li>java11</li> <li>java12</li> <li>java31</li> </ul> <input type="button" value="点我获取ul" onclick="run()" /> <p></p> <input type="checkbox" name="bb" value="bc1" />编程1 <input type="checkbox" name="bb"value="bc2" />编程2 <input type="checkbox" name="bb"value="bc3" />编程3 <input type="checkbox" name="bb"value="bc4" />编程 4 <p></p> <input type="button" value="请点击" onclick="run1()" /> <input type="button" value="点击获取UL" onclick="run()"/> <input type="button" value="点击获取LI数组对象" onclick="run1()"/> <input type="button" value="点击获取UL数组对象" onclick="run2()"/> <input type="button" value="点击复选框数组对象" onclick="run3()"/> <input type="button" value="点击改变第一个li为android" onclick="run5()"/> </body> </html>
相关文章推荐
- 异步安全加载javascript文件的方法
- Javascript实现获取及设置光标位置的方法
- javascript实现网页屏蔽Backspace事件,输入框不屏蔽
- js字符串转换成数字与数字转换成字符串的实现方法
- 奇淫異術: javascript 的超cool 技巧。
- jqGrid中prmNames,jsonReader,colModel的参数简介
- javascript中,实现的string的format函数
- 算法导论 第二十四章:单源最短路径
- Javascript正则构造函数与正则表达字面量&&常用正则表达式
- 【小练习】js冒泡排序
- 《JavaScript设计模式与开发实践》读书笔记之享元模式
- javascript 盒子模型
- jstack(查看线程)、jmap(查看内存)和jstat(性能分析)命令
- js JSON对象属性
- Zepto.js源码分析
- IDF-CTF-简单的js加密 writeup
- 2015.7.20 第九课 课程重点(js语句:获取时间、数字取值、定时器)
- JSP/SERVLET入门教程--Servlet 使用入门
- JS检查浏览器类型和版本
- JS检查浏览器类型和版本