JavaScript_节点相关操作
来源:互联网 发布:3大运营商网络制式 编辑:程序博客网 时间:2024/06/10 22:34
什么是节点?
节点(node):来源于网络理论,代表网络中的一个连接点。网络是由节点构成的集合
树也有节点,从根到叶每一个点都相当于一个节点
节点都有哪些操作?
1.获取指定的元素节点
1). 获取 id 为 bj 的那个节点.
//在编写 HTML 文档时, 需确保 id 属性值是唯一的. //该方法为 document 对象的方法 var bjNode = document.getElementById("bj"); alert(bjNode);
上面使用了getElementById();方法
该方法为寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null。
2). 获取所有的 li 节点.
//使用标签名获取指定节点的集合. //该方法为 Node 接口的方法, 即任何一个节点都有这个方法. var liNodes = document.getElementsByTagName("li"); alert(liNodes.length); var cityNode = document.getElementById("city"); var cityLiNodes= cityNode.getElementsByTagName("li"); alert(cityLiNodes.length);
这里使用了getElementsByTagName()方法
该方法寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
3) 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.
var genderNodes = document.getElementsByName("gender");alert(genderNodes.length);
4)若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()方法对于 IE 无效. 所以使用该方法时需谨慎.
var bjNode2 = document.getElementsByName("BeiJing");alert(bjNode2.length);
源代码body部分如下:
<body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body>
2.读写属性节点
通过元素节点 . 的方式来获取属性值和设置属性值.
属性节点即为某一指定的元素节点的属性.
1). 先获取指定的那个元素节点
var nameNode = document.getElementById("name");
2). 再读取指定属性的值
alert(nameNode.value);
使用元素节点.value方法读取到相应的值
3). 设置指定的属性的值.
nameNode.value = "chance";
使用元素节点.value = 值 的方法进行赋值
源代码body体内容为:
<body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="test"/> </body>
3.获取元素节点的子节点
1). 获取 city 节点的所有子节点.
var cityNode = document.getElementById("city");
2). 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.但该方法不实用.
alert(cityNode.childNodes.length);
3). 获取 #city 节点的所有 li 子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);
4). 获取指定节点的第一个子节点和最后一个子节点.
alert(cityNode.firstChild); alert(cityNode.lastChild);
源代码中body体内容如下:
<body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="chance"/> </body>
节点有哪些属性
关于节点的属性: nodeType, nodeName, nodeValue
在文档中, 任何一个节点都有这 3 个属性
而 id, name, value 是具体节点的属性.
nodeType、nodeName 是只读的.
而 nodeValue 是可以被改变的。
以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.
例如:
//1. 元素节点的这 3 个属性 var bjNode = document.getElementById("bj"); alert(bjNode.nodeType); //元素节点: 1 alert(bjNode.nodeName); //节点名: li alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null //2. 属性节点 var nameAttr = document.getElementById("name") .getAttributeNode("name"); alert(nameAttr.nodeType); //属性节点: 2 alert(nameAttr.nodeName); //属性节点的节点名: 属性名 alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值 //3. 文本节点: var textNode = bjNode.firstChild; alert(textNode.nodeType); //文本节点: 0 alert(textNode.nodeName); //节点名: #text alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.
body代码如下:
<body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="atguigu"/> </body>
1 0
- JavaScript_节点相关操作
- JavaScript_窗口的操作
- javascript_操作样式
- javascript_操作表格
- JS:DOM相关:table对象,节点操作
- jQuery操作DOM节点的相关方法
- ztree设置节点checked,选中某节点等相关操作
- JavaScript_个人笔记5_JavaScript_event相关的重要参数
- 黑马程序员_JQuery中对节点的相关操作回顾
- jq元素节点与属性的相关操作
- js Dom节点的获取 以及相关操作
- js-Dom节点的获取-以及相关操作
- 带头节点单链表的合并及相关操作
- JavaScript_在指定节点之后插入新节点_insertAfter(newElement, targetElement) _ JavaScript扩展
- JavaScript_查找指定节点之后的下一个元素节点_getNextElement(node)_JavaScript扩展
- JavaScript_ Js操作Cookie总结(设置,读取,删除)
- JavaScript节点相关操作(2)创建和删除节点以及做一个联动菜单
- 节点操作
- jsp 校验数字 保留两位小数 不能输入汉字
- Adb shell 之 input 命令
- jmeter学习 六
- ubuntu14.04 l LTS 修改字体大小以及格式
- C++新手常见低级错误
- JavaScript_节点相关操作
- git设置代理、记住密码
- iOS 用 AVPlayer 播放一个本地音频文件
- iOS开发之NSRunLoop概述
- iOS导航栏返回按钮
- 唯一分解定理+笔记(我的第一篇博客)【喜+1!】
- brainfuck解释器源码(c语言版)
- HttpClient超时设置
- Xcode插件大全