Document对象:
- 根元素的访问,也就是HTML标签的访问。使用document.documentElement访问根对象。
- 使用Document对象查找对象
- getElementById():通过节点的id属性,查找对应节点。
- getElementsByName():通过节点的name属性,查找对应节点。
- getElementsByTagName():通过节点名称,查找对应节点。
- 使用Document对象的方法创建节点:
- crateElement(tagName):创建元素节点。
- createTextNode(data):创建文本节点。
- createAttirbute(name):创建属性节点。(不使用)
Element对象:
- 操作Element对象的属性:
- 获取属性:getAttribute(name);方法
- 设置属性:setAttribute(name,value)方法。
- 删除属性:removeAttribute(name);方法。
- 在Element对象中查找Element对象:
- 在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。
Element对象的一个案例:
- 在一个<ul></ul>标签下创建一个li标签
<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <script type="text/javascript"> //创建一个标签元素 var liElment = document.createElement("li"); //创建一个文本节点 var textElement = document.createTextNode("上海"); //将文本节点加到标签元素下面 liElment.appendChild(textElement); //为标签元素创建属性 liElment.setAttribute("id","sh"); liElment.setAttribute("name","Shanghai"); //将标签元素加到ul标签下 document.getElementById("city").appendChild(liElment); </script> </body>
Node对象包含:
- 节点名称,值和类型。
- 父节点,子节点和同辈节点。
- 节点属性
- 检测子节点和属性。
- 操纵Dom节点树。
- 复制和移动节点。
节点名称,值和类型:
- nodeName:其内容就是给节点的名称。
- 如果是元素节点,nodeName返回这个元素的名称。
- 如果是属性节点,nodeName返回这个属性的名称。
- 如果是文本节点,nodeName返回这个内容为#text的字符串。
- nodeType:返回一个整数,这个数值代表给点节点的类型。
- Node.ELEMENT_NODE:1,元素节点。
- Node.ATTRIBUTE_NODE:2,属性节点。
- Node.TEXT_NODE:3,文本节点
- nodeValue:返回给定节点的当前值(字符串):
- 如果给定节点是一个元素节点:返回null。
- 如果给定节点是一个属性节点:返回属性的值。
- 如果给定节点时一个文本节点:返回文本节点的内容。
- 下面是使用的示例:
<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <p> 你好 </p> <script type="text/javascript"> var bj = document.getElementById("bj"); //元素节点 // alert(bj.nodeName);//li // alert(bj.nodeType);//1 // alert(bj.nodeValue);//null //属性节点 // var name = bj.getAttributeNode("name") // alert(name.nodeName); //name // alert(name.nodeType); //2 // alert(name.nodeValue); //beijing var p = document.getElementsByTagName("p")[0]; var text = p.childNodes[0]; alert(text.nodeName);//#text alert(text.nodeType);//3 alert(text.nodeValue);//你好 </script> </body>
父节点,子节点和同辈节点:
- 父节点:parentNode:
- parentNode返回的永远都是一个节点,因为只有元素节点才有可能包含子节点。
- document节点没有父节点。也就是文档节点没有父节点,也就是HTML
- 子节点:childNode:
- childNodes,获取指定节点的所有子节点。其实上个例子已经使用了。
- firstChild:指定第一个子节点。
- lastChild:指定最后一个子节点。
- 同辈节点:
- nextSibling:返回一个给定节点的下一个兄弟节点。
- previousSibling:返回一个节点的上一个兄弟节点。
- 示例如下:
<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <p>你好</p><input type="text"> <script type="text/javascript"> //获取p标签的父,子,兄节点 var p = document.getElementsByTagName("P")[0]; alert(p.parentNode);//body alert(p.childNodes[0].nodeValue)//你好 alert(p.previousSibling.nodeValue)//空格,说明空格也会作为一个节点 alert(p.nextSibling.nodeName);//input。这里就没出现空格,就是input节点 </script> </body>
节点属性:
- 节点属性attributes是Node接口定义的属性。
- 节点属性attributes就是节点的属性(特别是元素节点)的属性。
- 事实上,attributes中包含的是一个节点所有属性的集合。
- attributes.getNameItem()和Element元素的getAttribute()方法很相似。
<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <script type="text/javascript"> var bj = document.getElementById("bj"); alert(bj.attributes[1].nodeValue); </script> </body>
检测子节点和属性
- 查看是否有子节点:hasChildNodes();
- 查看是存在属性:hasAttributes();
- 即使节点中没有定义属性,其attributes属性还是有效的,而且长度是0。同样childNodes属性也是如此。
- 当你想知道某个节点是否包含子节点或属性时,使用hasChildNodes(),hasAttributes()。如果想知道包含多少个:attributes和childNodes属性。
- 在IE中不存在hasAttributes();方法。(不使用)
- 示例如下:
<body> <input type="text" id="username" value="username"> <p> 明天休息 </p> <script type="text/javascript"> // var username = document.getElementById("username"); // alert(username.hasChildNodes());//false // alert(username.hasAttribute());//无效果 var p = document.getElementsByTagName("p")[0]; alert(p.hasChildNodes());//true </script> </body>
操作Dom节点数:
- 插入节点:
- appendChild()方法。
- insertBefore()方法。
- 没有insertAfter()方法。
- 删除节点:
- removeChild()方法。
- 替换节点:
- replaceChild()
- 示例
<body> <ul id="city"> <!--注意这里不要回车--> <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li> </ul> <script type="text/javascript"> //创建<li id="sh" name="shanghai">上海</li>节点,增加到天津节点的前面 // var liElement = document.createElement("li"); // liElement.appendChild(document.createTextNode("上海")); // liElement.setAttribute("id","sh"); // liElement.setAttribute("name","shanghai"); // liElement.insertBefore(document.getElementById("tj")); // document.getElementById("city").appendChild(liElement); //<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面,没有insertAfter()方法。 var liElement = document.createElement("li"); liElement.appendChild(document.createTextNode("上海")); liElement.setAttribute("id","sh"); liElement.setAttribute("name","shanghai"); var bjElement = document.getElementById("bj") //得到兄弟节点 var nextElement = bjElement.nextSibling; liElement.insertBefore(nextElement); //添加到city下面 document.getElementById("city").appendChild(liElement); </script> </body>
复制和移动节点:
- 复制节点:cloneNode(boolean)方法,其中boolean参数是判读是否复制子节点。
- 移动节点:由三种方法组合完成:
- 查找节点:
- getElementById();通过节点id属性,查找对应节点。
- getElementsByName();通过节点名称,查找对应节点。
- getElementsByTagName();通过节点名称,查找对应节点。
- 插入节点:
- insertBefore()方法
- appendChild()方法。
- 替换节点:
- replaceChild()方法。
- 查找节点:
- 示例代码如下:
复制案例:<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <ul id="game"> <li id="fk" name="fankong">反恐精英</li> <li id="xj" name="xingji">星际</li> </ul> <script type="text/javascript"> //当点击北京节点,就和反恐精英替换 document.getElementById("bj").onclick = function(){ //得到北京节点 var bjElement = document.getElementById("bj"); //得到反恐精英 var fkElemet = document.getElementById("fk"); //这里也可以:this.parentNode.replaceChild(fkElemet,bjElement); bjElement.parentNode.replaceChild(fkElemet,bjElement); } </script> </body>
<body> <input type="button" id="login" value="登陆"> <p> 按钮来这: </p> <script type="text/javascript"> document.getElementById("login").onclick = function(){ var loginElement = document.getElementById("login"); //也可以写成:var copy = this.cloneNode(true); var copy = loginElement.cloneNode(true); var pElemet = document.getElementsByTagName("p")[0]; pElemet.appendChild(copy); } </script> </body>