JavaScript DOM编程艺术之3-4章知识点总结
来源:互联网 发布:圈圈助手网络连接失败 编辑:程序博客网 时间:2024/05/29 18:31
1:HTML5新增方法
getElementByClassName("name1 name2.....")
可以指定多个类名,且顺序不影响,匹配到的元素是类名同时具有name1和name2的(可以有多的类名)
因为比较新的浏览器才支持这个,所以最好写成这样一个函数:
<span style="white-space:pre"></span><script>/*node是DOM树中的搜索起点,classname为需要搜索的类名*/function getElementByClassName(node,classname){if(node.getElementByClassName)return node.getElementByClassName(classname);else{var results=new Array();var elems=document.getElementsByTagName("*");for(var i=0;i<elems.length;i++){if(elems[i].className.indexOf(classname)!=-1){results[results.length]=elems[i];}}return results;}}</script>
2:getAttribute,setAttribute
这两种方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用
小例子:
var paras=document.getElementsByTagName("p");for(var i=0;i<paras.length;i++){var title_text=paras[i].getAttribute("title");if(title_text){paras[i].setAttribute("title","blablabla");alert(paras[i].getAttribute("title"));}}
3:chiledNodes与nodeType
childNodes属性可以用来获取任何一个元素的所有子元素(仅儿子辈),是一个数组
但childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点(空格,换行都会被解释为节点)
可以用nodeType属性,可以知道节点类型(一共12种)
nodeType==1 元素节点
nodeType==2 属性节点
nodeType==3 文本节点
而element.children 就相当于 element.childNodes(nodeType==1)
4:nodeValue
可以返回或设置指定节点的节点值
其中需要注意些地方,具体在例子中体现:
<HEAD> <TITLE>空谷悠悠</TITLE> </HEAD> <BODY> <table> <tr> <td id="john" name="myname">John</td> <td>Doe</td> <td id="jack">Jack</td> </tr> </table>
<script> var d = document.getElementById("john"); alert(d.nodeType) alert(d.nodeName) alert(d.nodeValue)
/*nodeType:ELEMENT_NODEnodeType值:1nodeName:元素标记名 //此处为TDnodeValue:null*/
var d = document.getElementById("john").getAttributeNode("name"); alert(d.nodeType) alert(d.nodeName) alert(d.nodeValue)
/*nodeType:ATTRIBUTE_NODEnodeType值:2nodeName:属性名 // namenodeValue:属性值 //myname*/
var d = document.getElementsByTagName("td")[0].firstChild //<td>元素本身的nodeValue是空,需要的是它包含的文本节点的值!! alert(d.nodeType) alert(d.nodeName) alert(d.nodeValue)
/*nodeType:TEXT_NODEnodeType值:3nodeName:#textnodeValue:文本内容 // John*/
0 0
- JavaScript DOM编程艺术之3-4章知识点总结
- 《JavaScript DOM编程艺术》总结
- 《JavaScript Dom编程艺术》 笔记 总结
- JavaScript+DOM编程艺术 第三章 DOM
- javascript DOM的总结(基于JavaScript DOM编程艺术)
- 前端学习之《JavaScript DOM 编程艺术》读书笔记(4)
- javascript之Dom编程艺术一
- javascript之Dom编程艺术二
- javascript之Dom编程艺术三
- javascript之Dom编程艺术四
- javascript之Dom编程艺术五
- javascript之Dom编程艺术一
- javascript之Dom编程艺术六
- JavaScript DOM编程艺术之js语法
- 《Javascript DOM编程艺术》第2版 知识点汇总
- JavaScript Dom编程艺术
- 《Javascript DOM 编程艺术》
- JavaScript Dom 编程艺术
- SDRAM驱动篇之简易SDRAM控制器的verilog代码实现
- DeepLearning tutorial(1)Softmax回归原理简介+代码详解
- Android Volley完全解析(一),初识Volley的基本用法
- 继承与派生(面向对象)
- zabbix 四张大表分区
- JavaScript DOM编程艺术之3-4章知识点总结
- css多种方式实现元素的居中效果
- 五、python笔记之数据类型
- 如何查找native方法所对应的底层文件
- Python之import与from...import的区别与用法
- Android 区别真机和模拟器的几种方法
- 洛谷1314 聪明的质监员
- 脏读、不可重复读、幻读区别
- 正则表达式