DOM的三大结点:元素结点、文本结点、属性结点
来源:互联网 发布:co网络用语是什么意思 编辑:程序博客网 时间:2024/05/29 02:29
先来看一句HTML小代码:
<p id="ptag">this is a p tag</p>
根据上面的那句代码,来说说一下什么是元素结点(element node),简单说就是一个标签,如:<p></p>(不带属性,不带内容,就仅仅只是一个标签)
对于元素结点的nodeName就是标签名(大写),而nodeValue就是null或undefined(除了标签名,啥也没有,nodeValue就不可能有值)
<p id="ptag">this is a p tag</p> <script> nodeObj = document.getElementById("ptag"); console.log(nodeObj.nodeName);//result:P(注意:是大写) console.log(nodeObj.nodeValue);//result:null </script>
上面的nodeObj获得的是结点对象,指的是:<p id=”ptag”>this is a p tag</p>
但是用结点属性(nodeName,nodeValue…)访问它,针对的只是这个对象的标签,即元素结点
那什么是文本结点?
文本结点指的标签里面的所有内容,在<p id=”ptag”>this is a p tag</p> 这句代码里,指的是起始标签<p id=”ptag”> 和闭合标签</p> 之间的所有内容,即this is a p tag
用代码表示就是:
document.getElementById("ptag").childNodes[0]//或document.getElementById("ptag").firstChild
在这里就有疑问了,childNodes[0]和firstChild,都表示第一个儿子的意思?也就是说一个结点对象有多个文本结点??
我做了一下测试:
<p id="ptag"> this is the first paragraph. <span>this is the second paragraph.</span> this is the third paragraph. </p> <script> nodeObj = document.getElementById("ptag"); console.log(nodeObj.childNodes[0]); //result:this is the first paragraph. console.log(nodeObj.childNodes[1]); //result:<span>this is the second paragraph.</span> console.log(nodeObj.childNodes[2]); //result:this is the third paragraph. </script>
我原本以为<p> 的第一个子结点就应该是<span>
然而事实并不是,一个元素的子结点可以分为两类:文本结点和元素结点
所以文本结点就得重新定义:文本结点就是元素起始标签和闭合标签内的不加其他标签修饰的文本内容
因此,文本结点的nodeValue就是文本内容,而nodeName都是#text
<p id="ptag">this is a p tag.</p> <script> nodeObj = document.getElementById("ptag"); textNode = nodeObj.childNodes[0];//从结点对象获得文本结点 console.log(textNode.nodeName);//result:#text console.log(textNode.nodeValue); //result:this is a p tag. </script>
至于属性结点就是一个标签里面的属性内容
一个属性就是一个属性结点,例如<p id=”ptag”>this is a p tag</p> 的id属性结点表示方法就是:
document.getElementById("ptag").getAttributeNode("id")
而属性结点的nodeName就是属性名(key),nodeValue就是属性值(value)
<p id="ptag">this is a p tag.</p> <script> nodeObj = document.getElementById("ptag"); idAttributeNode = nodeObj.getAttributeNode("id"); //从结点对象获得id属性结点 console.log(idAttributeNode.nodeName);//result:id console.log(idAttributeNode.nodeValue);//result:ptag </script>
总结
- DOM的三大结点:元素结点、文本结点、属性结点
- element元素结点属性
- DOM结点的渲染(attach)
- JavaScript DOM学习(4) 操作文本结点
- 获取DOM结点下的所有文本(原生版+jQuery)
- AJAX控制DOM结点
- Dom 结点创建【基础知识】
- DOM获取结点
- js结点(dom)
- JavaScript DOM 学习(2) 获取属性结点
- JavaScript DOM 学习(3) 读写属性结点
- XML空白文本结点
- js 文本结点
- 如何利用DOM删除一个结点的某个属性?
- 头结点链表的三种插入结点方式
- JS获取DOM结点的样式
- 单链表的头结点和结点
- 求根结点到指定结点的路径
- shell alias 别名
- CodeForces 641 A.Little Artem and Grasshopper(水~)
- Android App包瘦身优化实践
- 文章标题
- python获取交互式ssh shell
- DOM的三大结点:元素结点、文本结点、属性结点
- 关于androidpulltorefresh
- zlib error while attempting compression: "Ran out of output buffer for writing compressed bytes."
- WebRTC中RTP/RTCP协议实现分析
- 视频编码会议常用网址
- 关于js中动态生成的点击事件触发两次的讨论
- Base64编码在客户端与服务器传值问题
- 如何让Eclipse的启动速度加快
- bootstrap-file-input使用心得