jS获取元素结点
获取元素节点
1). **document.getElementById: 根据 id 属性获取对应的单个节点
2). **document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//获取指定的元素节点. window.onload = function(){//1. 获取 id 为 bj 的那个节点.//在编写 HTML 文档时, 需确保 id 属性值是唯一的. //该方法为 document 对象的方法var bjNode = document.getElementById("bj");alert(bjNode);//2. 获取所有的 li 节点. //使用标签名获取指定节点的集合. //该方法为 Node 接口的方法, 即任何一个节点都有这个方法. var liNodes = document.getElementsByTagName("li");alert(liNodes.length);var cityNode = document.getElementById("city");var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);//3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合. var genderNodes = document.getElementsByName("gender");alert(genderNodes.length);//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()//方法对于 IE 无效. 所以使用该方法时需谨慎. var bjNode2 = document.getElementsByName("BeiJing");alert(bjNode2.length);}</script></head><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>
</html>
4.读写属性节点
先获取元素节点，通过调用元素节点的value变量去读写元素节点的属性通常情况下，不会同过获取属性节点的方式去读写属性节点的值，而是用元素节点.属性名的方式去调用。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值. window.onload = function(){//属性节点即为某一指定的元素节点的属性. //1. 先获取指定的那个元素节点var nameNode = document.getElementById("name");//2. 再读取指定属性的值alert(nameNode.value);//3. 设置指定的属性的值.nameNode.value = "尚硅谷";//var nameAttr = nameNode.getAttributeNode("value");//alert(nameAttr);//alert("--" + nameAttr.nodeValue);//nameAttr.nodeValue = "atguigu";}</script></head><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>
</html>
5.获取一个节点的子节点
先获取父节点，通过childNodes方法或者父节点.getElementsByTagName("");获取子节点，也可以通过父节点.firstChild和lastChild方法获取其第一个与最后一个子节点1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 2). firstChild 属性获取第一个子节点3). lastChild 属性获取最后一个子节点 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//获取元素节点的子节点window.onload = function(){//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);}</script></head><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>
</html>
6.读写文本节点1). 步骤: 元素节点 --> 获取元素节点的子节点2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//获取文本节点window.onload = function(){//文本节点一定是元素节点的子节点. //1. 获取文本节点所在的元素节点var bjNode = document.getElementById("bj");//2. 通过 firstChild 定义为到文本节点var bjTextNode = bjNode.firstChild;//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. alert(bjTextNode.nodeValue);bjTextNode.nodeValue = "尚硅谷";//alert(bjTextNode);}</script></head><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>
</html>
————————————————————————————————————————————————————————两个练习，html内容与上述一样，直接将js代码块拿过来。<script type="text/javascript">window.onload = function(){//点击每个 li 节点, 都弹出其文本值. //1. 获取所有的 li 节点var liNodes = document.getElementsByTagName("li");//2. 实用 for 循环进行遍历. 得到每一个 li 节点for(var i = 0; i < liNodes.length; i++){//3 为每一个 li 节点添加 onclick 响应函数. liNodes[i].onclick = function(){//4. 在响应函数中获取当前节点的文本节点的文本值var TextNode = this.firstChild;//5. alert 打印. //this 为正在响应事件的那个节点. alert(TextNode.nodeValue);//此时 i 已经是 8 了, 而 liNodes[8] 不指向任何节点.所以不能使用alert(liNodes[i].firstChild.nodeValue);//alert(i);}} }</script>
<script type="text/javascript">window.onload = function(){//点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上//有, 则去除var liNodes = document.getElementsByTagName("li");for(var i = 0; i < liNodes.length; i++){liNodes[i].onclick = function(){var val = this.firstChild.nodeValue;var reg = /^\^{3}/g;if(reg.test(val)){val = val.replace(reg, "");}else{val = "^^^" + val;}this.firstChild.nodeValue = val;}}/*//1. 使用正则表达式判断是否已 ^^ 开始//2. 调用字符串的 replace(reg, str) 方法除去指定的字符串. var str = "^^abc";var reg = /^\^{2}/g;alert(reg.test(str)); //truestr = str.replace(reg, "");alert(str);var str2 = "abc";alert(reg.test(str2)); //false*/}</script>
7.节点的属性
节点有nodeType、nodeName、nodeValue三个属性1). nodeName: 代表当前节点的名字. 只读属性. **如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点**3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性①. 元素节点, 返回值是 null.②. 属性节点: 返回值是这个属性的值③. 文本节点: 返回值是这个文本节点的内容 <script type="text/javascript">//关于节点的属性: nodeType, nodeName, nodeValue//在文档中, 任何一个节点都有这 3 个属性//而 id, name, value 是具体节点的属性. window.onload = function(){//1. 元素节点的这 3 个属性var bjNode = document.getElementById("bj");alert(bjNode.nodeType); //元素节点: 1alert(bjNode.nodeName); //节点名: lialert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null//2. 属性节点var nameAttr = document.getElementById("name").getAttributeNode("name");alert(nameAttr.nodeType); //属性节点: 2alert(nameAttr.nodeName); //属性节点的节点名: 属性名alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值//3. 文本节点:var textNode = bjNode.firstChild; alert(textNode.nodeType); //文本节点: 0alert(textNode.nodeName); //节点名: #textalert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身. //nodeType、nodeName 是只读的.//而 nodeValue 是可以被改变的。 //以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多. }</script>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！