DOM节点层次(Element类型 Text类型)
来源:互联网 发布:java摆脱内存泄露 编辑:程序博客网 时间:2024/06/05 05:08
3.Element类型
除了Document类型之外,最常用的就是Element类型了(注意结合DOM节点树来分析)
Element类型具有一下特征:
- nodeType的值为1
- nodeName的值为元素的标签名
- nodeValue的值为null
- parentNode的值为Document或Element
1.要访问标签名可以用nodeName也可以用tagName属性。
var div=document.getElementById("mtDiv");alert (div.tagName);//"DIV"alert (div.tagName==div.nodeNade);//true
判断标签名是一定要转化为小写再判断,这样能兼容HTML和XML
if(element.tagName.toLowerCase()=="div"){ //某些操作}
2.html元素的特性操作
每个HTML元素存在以下标准特性:
id
title
lang(少用)
dir(语言方向)
className(与class特性对应)
- getAttribute()取得特性
var div=document.getElementById("myDiv");alert(div.getAttribute("id");//myDiv
- setAttribute()设置特性
div.setAttribute("id","idName");
- removeAttribute()删除特性
div.removeAttribute("class");
3.创建元素
var div=docuemnt.createElement("div");//创建一个div元素div.id="myDiv";//为这个div元素添加属性
这时候新元素并未被加入文档树中,要把新元素添加到文档数中,可以使用Node类型中添加节点的方法:
document.body.appendChild(div);
4.元素的子节点
元素的childNodes属性中包含着它所有的子节点,这些子节点可能是元素、文本节点、注释或处理命令。不同的浏览器在看待这些节点存在显著的不同
<ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>
IE: ul有3个子节点,那就是3个li元素
其他:ul有7个子节点,3个li元素和4个文本节点(<li>
元素之间的空白符)
所以注意:通过childNodes属性遍历子节点时,不要忘记这一差别。注意检查nodeType属性
<script> for(var i=0,len=element.childNodes;i<len;i++){ if(element.childNodes[i].nodeName==1){ //执行某些操作 } } </script>
如果想通过某个特定的标签名取得子节点或者后代节点那该怎么办呢???看下面
var ul=document.getElementById("myList");var items=ul.getElementByTagName("li");//元素也支持getElementByTagName
4.Text类型
文本节点又Text类型表示,包含的是可以照字面解释的纯文本内容。
nodeType的值为3
nodeName的值为”#Text”
nodeValue的值为节点所包含的文本
parentNode的值是一个Element
- nodeValue属性和data属性
通过nodeValue属性或data属性访问Text节点中包含的文本,
nodeValue.length或data.length保存着节点中字符的数目。
在默认情况下,每个可以包含内容的元素最多只有一个文本节点,而且必须确实有内容存在。
//没有内容,故没有文本节点<div></div>//有空格,因而有一个文本节点<div> </div>//有内容,因而有一个文本节点<div>Hello World</div>
- document.createTextNode()创建文本节点
var element=document.createElement("div");element.className="message";var textNode=document.creatTextNode("hello world");element.appendChild(textNode);//将这个文本节点添加到前面的div元素中document.body.appendChild(element);//将div元素添加到文档的body元素中。//这样就可以在浏览器中看到新创建的元素和文本节点了
- 分割文本节点
var element=document.createElement("div"); element.className="message"; var textNode=document.createTextNode("hello world"); element.appendChild(textNode); document.body.appendChild(element); var newNode=element.firstChild.splitText(5);//5是开始位置 alert(element.firstChild.nodeValue);//"hello" alert(newNode.nodeValue);//" world" alert(element.childNodes.length);//2
阅读全文
0 0
- DOM节点层次(Element类型 Text类型)
- DOM节点层次(Node类型)
- DOM节点层次(Document类型)
- 《JS高程(3)》DOM节点层次Element类型-第10章笔记(13)
- 《JS高程(3)》DOM节点层次Text类型-第10章笔记(14)
- 第十章:DOM(节点层次剩余节点类型介绍)
- JavaScript高级程序设计之DOM之节点层次之Element类型第10.1.3讲
- JavaScript高级程序设计之DOM之节点层次之Text类型第10.1.4讲
- JavaScript HTML DOM节点类型之Element类型(Element对象)
- 第十章:DOM(节点层次:Node类型和Document类型)
- 《JS高程(3)》DOM节点层次Node类型-第10章笔记(11)
- 《JS高程(3)》DOM节点层次Document类型-第10章笔记(12)
- 《JS高程(3)》DOM节点层次Comment类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次CDATASection类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次DocumentType类型-第10章笔记(16)
- DOM节点类型说明
- DOM节点类型说明
- DOM节点类型
- SQL Server中,备份数据表
- 一名合格的前端工程师的知识构成!
- 双栈排序
- PHP处理高精度运算
- hdu 1078 FatMouse and Cheese (深度优先搜索+dp)
- DOM节点层次(Element类型 Text类型)
- 关于PopupWindow一些用法(二)
- Android单元测试那些事儿(三)
- CSU 1216 异或最大值 01trie
- ES6新特性
- 四层、七层负载均衡的区别
- 设计4个线程,其中两个线程每次对j增加1,另外连个每次对j减少1,循环100次。
- select2 ajax 设置默认值,初始值
- 前端面试题