博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript的childNodes、nodeType、nodeValue属性
阅读量:6272 次
发布时间:2019-06-22

本文共 1237 字,大约阅读时间需要 4 分钟。

hot3.png

1.childNodes属性

childNodes属性可以用来获取任何一个元素的所有子元素,它是一个子元素数组。

假设需要检索出某个文档body元素的全部子元素,首先需要用getElementsByTagName获取body元素,getElementsByTagName返回的是一个数组,而一个文档只有一个body元素,所以:

var body_element = document.getElementsByTagName("body")[0];

那么,获取子元素的个数可以如下:

function countBodyChildren(){    var body_element = document.getElementsByTagName("body")[0];    alert(body_element.childNodes.length);}

需要让这个函数加载执行,则用:

window.onload = countBodyChildren;

2.nodeType属性

每一个元素节点都会有nodeType属性,它让我们知道自己正在和哪种节点打交道,但是美中不足的是nodeType的值并不是英文,而是数字。nodeType总共有12种可取值,但其中仅有3种有使用价值:

元素节点的nodeType属性值为1;

属性节点的nodeType属性值为2;

文本节点的nodeType属性值为3;

3.nodeValue属性

nodeValue是DOM提供的,它用来得到一个节点的值:node.nodeValue

var des = document.getElementById("description");alert(des.childNodes[0].nodeValue);//alert(des.firstChild.nodeValue);

可以用nodeValue刷新某段描述,如:

function showPicture(whichPicture){    var source = whichPic.getAttribute("href");    var placeHolder = document.getElementById("placeHolder");    placeHolder.setAttribute("src", source)    var text = whichPic.getAttribute("title");    var des = document.getElementById("desc");    des.firstChild.nodeValue = text;}

这样,原来显示的描述,通过这个函数处理会变成所获取到的title中的描述内容。

参考:JavaScript DOM编程艺术(中文第2版)

转载于:https://my.oschina.net/u/3640519/blog/1552156

你可能感兴趣的文章
[汇编语言学习笔记][第四章第一个程序的编写]
查看>>
android 打开各种文件(setDataAndType)转:
查看>>
补交:最最原始的第一次作业(当时没有选上课,所以不知道)
查看>>
Vue实例初始化的选项配置对象详解
查看>>
PLM产品技术的发展趋势 来源:e-works 作者:清软英泰 党伟升 罗先海 耿坤瑛
查看>>
vue part3.3 小案例ajax (axios) 及页面异步显示
查看>>
软件测试(二)之 Failure, Error & Fault
查看>>
浅谈MVC3自定义分页
查看>>
.net中ashx文件有什么用?功能有那些,一般用在什么情况下?
查看>>
select、poll、epoll之间的区别总结[整理]【转】
查看>>
CSS基础知识(上)
查看>>
PHP中常见的面试题2(附答案)
查看>>
角色权限分配
查看>>
明小子动力上传拿webshell.zip
查看>>
ES6 Module export与import复合使用
查看>>
第三篇、image 设置圆角的几种方式
查看>>
关于Vs2010 C#使用DirectX的问题
查看>>
EPP(Eclipse PHP)语法高亮仿EditPlus配置
查看>>
OA账号架构权限的问题
查看>>
030——VUE中鼠标语义修饰符
查看>>