什么是节点?
节点(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>