【DOM】Node类型之Element类型
来源:互联网 发布:知乎害人 编辑:程序博客网 时间:2024/06/02 03:22
本文章所有代码及其内容来自《javascript高级程序设计》,感兴趣的朋友可以购买纸质图书。
Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特征的访问。
- nodeType 的值为 1;
- nodeName的值为元素的标签名;
- nodeValue的值为null;
- parentNode 可能是Document或Element。
子节点可能是Element、Text、comment、CDATASection、EntityReference、ProcessionInstruction。
访问标签名(nodeName、tagName)
var div = document.getElementById("div");alert(div.nodeName == div.tagName); //true
以上代码中div.tagName输出是“DIV”而不是“div”。在HTML中标签始终是大小,而XML中会与源代码中保持一致,如果不确定自己的脚本将会在HTML还是XML文档中执行,最好是比较值钱将标签名转换为相同的大小写形式。
if(element.tagName == "div"){//代码}if(element.tagName.toLowerCase() == "div"){//代码}
所有HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性。
- id,元素在文档中的唯一标识符
- title,有关元素的附加说明信息
- lang,元素内容的语言代码
- dir,语言的方向,值为“ltr”(left-to-right从左至右)或”rtl”从右至左。
- className,元素指定的css。
2 取得特性
var div = document.getElementById("div");alert(div.getAttribute("id")); //div
<div class="myDiv" my_attribute="hello">var value = div.getAttribute("my_attribute"); //undefined (IE除外)
3 设置特性
div.setAttribute("id","someId");
//所有特性都是属性,所以直接给属性复制可以设置特性的值div.id="someOtherID";div.align = "left";//下面这样为DOM元素添加一个自定义的属性,该属性不会自动成为元素的特性div.mycolor = "red";alert(div.getAttribute("mycolor")); //null(IE除外)//删除特性div.removeAttribute("align");
4 attributes属性
Element属性是使用attributes属性的唯一一个DOM类型。attributes属性中包含一个NamedNodeMap。NamedNodeMap对象拥有下列方法。
- getNamedItem(name) – 范围nodeName属性等于name节点
- removeNamedItem(name) – 移除
- setNamedItem(name) –向列表添加节点,以节点的nodeName属性为索引
- item(pos) – 返回位于数字pos位置的节点
5 创建元素
//创建一个div元素var div = document.createElement("div");div.id="myDiv";div.class="box";//创建input元素var input = document.createElement("<input type=\"checkbox\">);document.body.appendChild(div);
6 元素的子节点
<ul><li>item1</li><li>item2</li><li>item3</li></ul>
如果是IE解析的话,那么<ul>
会有三个子节点。其它的浏览器中,<ul>
会有7个元素,包括三个<li>
元素和4个文本节点(表示<li>
元素之间的空白符)。如果将元素间的空白符删除,那么所有浏览器都会返回相同数目的子节点。
<ul><li>item1</li><li>item2</li><li>item3</li></ul>
对于这段代码,<ul>
元素在任何浏览器都会包含3个子节点。如果需要通过childNodes属性遍历子节点,那么不要忘记浏览器之间的区别。也就是执行某项操作至亲,通常都要先检查一下nodeType属性。
for(var i=0,len=element.childNodes.length; i<len; i++){ if(element.childNodes[i].nodeType == 1){ // 执行某项操作}}
0 0
- 【DOM】Node类型之Element类型
- 【DOM】Node类型之Document
- 【DOM】node类型
- JavaScript HTML DOM节点类型之Node类型介绍
- JavaScript DOM(三) Element 类型
- DOM学习总结---Element类型
- 【JavaScript学习】DOM:Element类型
- JavaScript HTML DOM节点类型之Element类型(Element对象)
- JavaScript学习-DOM-Node类型
- 【JavaScript学习】DOM:Node类型
- javascript之DOM(一节点类型Node)
- DOM节点层次(Element类型 Text类型)
- JavaScript高级程序设计之DOM之节点层次之Element类型第10.1.3讲
- DOM节点层次(Node类型)
- DOM Node Element Attr
- JavaScript高级程序设计之DOM之节点层次之Node类型第10.1.1讲
- Javascript之DOM(Document类型)
- JS学习之Node类型
- Android-25种开源炫酷动画框架
- HDU 5616 Jam's balance
- 欢迎使用CSDN-markdown编辑器
- deep learning with R
- LeetCode OJ 106. Construct Binary Tree from Inorder and Postorder Traversal
- 【DOM】Node类型之Element类型
- mysql中游标的使用案例详解(学习笔记)
- 为何用https
- MyCat部署运行(Windows环境)与使用步骤详解
- JS:关于JS引用类型——Function类型
- 股神
- 代码没有命名规范好麻烦。这时实践中的代码命名规范C#
- zabbix 3.0.2邮件报警
- android jxl对excel进行读、写、修改操作,设置excel列宽