一:在什么位置编写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 读写文本值时使用最多。