DOM之获取元素,获取和设置属性
2016-04-09 16:01
309 查看
1.getElementsByTagName允许把一个通配符作为一个参数,而这意味着文档里的每一个元素都将在这个函数所返回的数组里占有一席之地。通配符(“*”),如果想知道某文档里总共有多少个元素节点。
2.如果想知道id属性值是purchase的元素包含着多少个列表项,
3.要指定多个类名,只要再字符串参数中用空格分隔类名即可。
可能有浏览器不支持getElementsByClassName,就只能用已有的DOM来实现该功能。
4.一份文档就是一棵节点树。
5.节点分为不同类型,元素节点,属性节点,文本节点。
6.getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点。
7.每个节点都是一个对象
8.得到元素后,我们就用getAttribute获取它的各个属性,用setAttribute更改属性节点的值。
getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点对象调用。
9.setAttribute也只用于元素节点,如果setAttribute用在一个本身就有某个属性的元素节点上,则这个属性的值就会被覆盖,如果这个属性原先不存在,这表明setAttribute实际完成了两项操作,先创建这个属性,然后设置它的值。
10.通过setAttribute对文档做出修改后,在通过浏览器的查看源代码选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种表里不一的现象源自DOM的工作模式,先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容,对页面内容进行刷新却不需要再浏览器里刷新页面。
document.getElementsByTagName("*").length;
2.如果想知道id属性值是purchase的元素包含着多少个列表项,
var shopping=document.getElementById("purchases"); var items=shopping.getElementsByTagName("*");
3.要指定多个类名,只要再字符串参数中用空格分隔类名即可。
document.getElementsByClassName("important sale").length;表示同时带有“important"和“sale”的类名,类名的实际顺序不重要,就算元素还带有更多的类名也没关系。
可能有浏览器不支持getElementsByClassName,就只能用已有的DOM来实现该功能。
<body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff</p> <ul id="purchases"> <li class="important">A tin of beans</li> <li class="sale">A tin of beans2</li> <li class="sale">A tin of beans3</li> </ul> <script> function getElementsByClassName(node,classname){ if(node.getElementsByClassName){ return node.getElementsByClassName(classname); } else{ var results=new Array(); var elems=node.getElementsByTagName("*"); for(var i=0;i<elems.length;i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } } return results; } } var shopoing=document.getElementById("purchases"); var sales=getElementsByClassName(shopoing,"sale"); </script> </body>
4.一份文档就是一棵节点树。
5.节点分为不同类型,元素节点,属性节点,文本节点。
6.getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点。
7.每个节点都是一个对象
8.得到元素后,我们就用getAttribute获取它的各个属性,用setAttribute更改属性节点的值。
getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点对象调用。
<body> <h1>What to buy</h1> <p>Don't forget to buy vegetable</p> <p title="a gentle reminder">Don't forget to buy this stuff</p> <ul id="purchases"> <li>A tin of beans</li> <li>A tin of beans2</li> <li>A tin of beans3</li> </ul> <!-- 得到元素后,我们就用getAttribute获取它的各个属性,用setAttribute更改属性节点的值。--> <script type="text/javascript"> var paras=document.getElementsByTagName("p"); for(var i=0;i<paras.length;i++){ var titleText=paras[i].getAttribute("title"); if(titleText){ //if(titleText!=null) alert(titleText); } } </script> </body>
9.setAttribute也只用于元素节点,如果setAttribute用在一个本身就有某个属性的元素节点上,则这个属性的值就会被覆盖,如果这个属性原先不存在,这表明setAttribute实际完成了两项操作,先创建这个属性,然后设置它的值。
<script type="text/javascript"> var shopping=document.getElementById("purchases"); shopping.setAttribute("title","a list of goods"); </script>
10.通过setAttribute对文档做出修改后,在通过浏览器的查看源代码选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种表里不一的现象源自DOM的工作模式,先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容,对页面内容进行刷新却不需要再浏览器里刷新页面。
相关文章推荐
- QNX 实时操作系统(Quick Unix)
- 第六周作业
- ajax返回数据类型 text json xml
- 实验七:Linux内核如何装载和启动一个可执行程序
- iOS开发--即时通讯
- Linux 性能检测工具Vmstat命令
- 面积公式小结
- JavaScript 触发事件列表
- ImageView 的 src 属性
- 在CentOS 7上构建RAID5、LVM和SAMBA服务器(4)——逻辑卷(组)扩容
- 状压dp
- 继承与派生定义及相关程序调用举例
- 1012. The Best Rank
- C语言中使用快速排序算法对元素排序的实例详解
- c++ tuple类型
- Qt5.2.0配置sdk
- 自定义view的measureSpec是谁的mode和size
- dapper 的学习
- BZOJ 4311 向量
- 2-SAT题集