JavaScript__一

一：在什么位置编写JS代码
答：一般的，在body节点之前编写 js 代码，但需要利用 window.onload 事件，写在window. function(){} 里面。

二、如何来获取元素节点
元素节点，属性节点，文本节点。其中文本节点是属性节点的子节点。
①获取 id 为 bj 的那个节点。
在编写 HTML 文档时，需确保 id 属性值是唯一的。
该方法为 document 对象的方法

var bjNode = document.getElementById("bj");
alert(bjNode);

②获取所有的li节点。
使用标签名获取指定节点的集合。
该方法为Node 接口的方法，即任何一个节点都有这个方法。

var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);

③获取指定节点的所有 li 节点：

var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

④根据 HTML 文档元素的 name 属性名来获取指定节点的集合。

var genderNodes =  document.getElementsByName("gender");
alert(genderNodes.length);

若 HTML 元素自身没有定义name属性，则getElementsByName() 方法对于IE无效，所以使用该方法时需谨慎！

var bjNode2 = document.getElementsByName("Beijing");
alert(bjNode2.length);

三、如何来读写属性节点
读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值。
属性节点即为某一指定的元素节点的属性
①先获取指定的那个元素节点
var nameNode = document.getElementById("name");
②再读取指定属性的值

alert(nameNode.value);

③设置指定的属性的值.

nameNode.value = "尚硅谷";

四、如何来获取文本节点
文本节点一定是元素节点的子节点。
步骤：元素节点——> 获取元素节点的子节点
若元素节点只有文本节点一个子节点，例如

<li id="bj" name="BeiJing">北京</li>
<p>你喜欢哪个城市?</p>

可以先获取到指定的元素节点eleNode，然后利用eleNode.firstChild.nodeValue 的方法来读写其文本节点的值。

//1. 获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
				
//2. 通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
				
//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. 
alert(bjTextNode.nodeValue);
				
bjTextNode.nodeValue = "尚硅谷";
```·


五、关于节点的属性：nodeType ，nodeName， nodeValue。
在文档中, 任何一个节点都有这 3 个属性，而 id, name, value 是具体节点的属性.

①元素节点的这 3 个属性

var bjNode = document.getElementById("bj");
alert(bjNode.nodeType); //元素节点: 1
alert(bjNode.nodeName); //节点名: li
alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null

②属性节点

var nameAttr = document.getElementById("name")
				                       .getAttributeNode("name");
				alert(nameAttr.nodeType); //属性节点: 2
				alert(nameAttr.nodeName); //属性节点的节点名: 属性名
				alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

③文本节点:

var textNode = bjNode.firstChild;
				alert(textNode.nodeType); //文本节点: 0
				alert(textNode.nodeName); //节点名: #text
				alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.

其中，nodeType、nodeName 是只读的，而 nodeValue 是可以被改变的。
以上三个属性，只有在文本节点中使用 nodeValue 读写文本值时使用最多。

猜你喜欢