JavaScript知识归纳(2)
2016-02-29 17:23
471 查看
替换节点:
replaceChild()把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 您喜欢的城市: <br> <ul> <li id="bj" value="beijing"> 北京 </li> <li id="sh" value="shanghai"> 上海 </li> <li id="cq" value="chongqing"> 重庆 </li> </ul> 您喜欢的游戏: <br> <ul> <li id="fk" value="fangkong"> 反恐 <p> xxxxxx </p>精英 </li> <li id="ms" value="moshou"> 魔兽 </li> <li id="cq" value="chuanqi"> 传奇 </li> </ul> </body> <script language="JavaScript"> //点击北京节点, 将被反恐节点替换 // var bj = document.getElementById("bj"); // bj.onclick = function(){ // var fk = document.getElementById("fk"); // var parentNode = bj.parentNode; // parentNode.replaceChild(fk,bj); // } //点击北京节点, 将被反恐节点替换 document.getElementById("bj").onclick = function(){ var oldChild = this; var newChild = document.getElementById("fk"); //获取北京的父节点 var bjParent = oldChild.parentNode; var index = bjParent.replaceChild(newChild, oldChild); alert(index.id);//返回是一个已被替换的节点的引用指针(bj) } </script> </html>
查找属性节点:
getAttribute() 返回一个给定元素的一个给定属性节点的值var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回一个空字符串.
通过属性获取属性节点
getAttributeNode(属性的名称)--Node
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form name="form1" action="test.html" method="post"> <input type="text" name="tname" value="传智播客5周年_1" id="tid_1"> <br> <input type="text" name="tname" value="传智播客5周年_2" id="tid_2"> <br> <input type="text" name="tname" value="传智播客5周年_3" id="tid_3"> <br> <input type="button" name="ok" value="保存1"/> </form>您喜欢的城市: <br> <ul> <li id="bj" value="beijing"> 北京 </li> <li id="sh" value="shanghai"> 上海 </li> <li id="cq" value="chongqing"> 重庆 </li> </ul> 您喜欢的游戏: <br> <ul> <li id="fk" value="fangkong"> 反恐 </li> <li id="ms" value="moshou"> 魔兽 </li> <li id="xj" value="xingjixxxxx"> 星际争霸 </li> </ul> </body> <script language="JavaScript"> //<li id="xj" value="xingji">星际争霸</li>节点的value属性的值 var xj = document.getElementById("xj"); alert(xj.getAttribute("value")); </script> </html>
设置属性节点:
setAttribute()将给定元素节点添加一个新的属性值或改变它的现有属性的值。element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 您喜欢的城市: <br> <ul> <li id="bj" value="beijing"> 北京 </li> <li id="sh" value="shanghai"> 上海 </li> <li id="cq" value="chongqing"> 重庆 </li> </ul> 您喜欢的游戏: <br> <ul> <li id="fk" value="fangkong"> 反恐 </li> <li id="ms" value="moshou"> 魔兽 </li> <li id="xj" value="xingji"> 星际争霸 </li> </ul> </body> <script language="JavaScript"> //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li> var xj = document.getElementById("xj"); alert(xj.getAttribute("name"));//null //测试 xj.setAttribute("name", "xingjizhengba"); alert(xj.getAttribute("name")); </script> </html>
创建新元素节点:
createElement():按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.var reference = document.createElement(element);
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");
创建新文本节点 :
createTextNode()创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性
插入节点(1):
appendChild()为给定元素增加一个子节点:var newreference = element.appendChild(newChild).
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() 、createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 您喜欢的城市:<br> <ul id="city"> <li id="bj" value="beijing">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing">重庆</li> </ul> 您喜欢的游戏:<br> <ul> <li id="fk" value="fangkong">反恐</li> <li id="ms" value="moshou">魔兽</li> <li id="xj" value="xingji">星际争霸</li> </ul> </body> <script language="JavaScript"> //增加城市节点 <li id="tj" v="tianjin">天津</li> //创建元素节点li //<li></li> var li = document.createElement("li"); // <li id="tj" v="tianjin"></li> li.setAttribute("id","tj"); li.setAttribute("v","tianjin"); //天津 var text = document.createTextNode("天津"); //<li id="tj" v="tianjin">天津</li> li.appendChild(text); //获取城市节点 var city = document.getElementById("city"); city.appendChild(li); </script> </html>练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <select name="edu" id="edu"> <option value="博士">博士^^^^^</option> <option value="硕士">硕士^^^^^</option> <option value="本科">本科^^^^^</option> <option value="幼儿园">幼儿园^^^^^</option> </select> </body> <script language="JavaScript"> //增加<option value="大专">大专^^^^^</option> //创建<option> var option = document.createElement("option"); //<option value="大专"></option> option.setAttribute("value", "大专"); //<option value="大专">大专^^^^^</option> var text = document.createTextNode("大专^^^^^"); option.appendChild(text); //获取edu的select元素 var edu = document.getElementById("edu"); edu.appendChild(option); </script> </html>
插入节点(2):
insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>insertBefore.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul> <li id="bj" name="beijing"> 北京 </li> <li id="sh" name="shanghai"> 上海 </li> <li id="cq" name="chongqing"> 重庆 </li> </ul> </body> <script language="JavaScript"> // 插入新的节点 <li id="tj" name="tianjin">天津</li> var tj = document.createElement("li"); tj.setAttribute("id", "tj"); tj.setAttribute("name", "tianjin"); //创建文本节点 var text = document.createTextNode("天津") tj.appendChild(text); // 在 <li id="cq" name="chongqing">重庆</li>的前面 //获取重庆的节点 var cq = document.getElementById("cq"); //获取重庆的父节点 var parent = cq.parentNode; parent.insertBefore(tj, cq); </script> </html>
插入节点(3):
DOM 没有提供 insertAfter() 方法<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>insertBefore.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul> <li id="bj" name="beijing"> 北京 </li> <li id="sh" name="shanghai"> 上海 </li> <li id="cq" name="chongqing"> 重庆 </li> </ul> </body> <script language="JavaScript"> // 插入新的节点 <li id="tj" name="tianjin">天津</li> var tj = document.createElement("li"); tj.setAttribute("id", "tj"); tj.setAttribute("name", "tianjin"); //创建文本节点 var tjText = document.createTextNode("天津"); tj.appendChild(tjText); // 在 <li id="sh" name="shanghai">上海</li>的后面 //获取上海的节点 var sh = document.getElementById("sh"); //获取上海的父节点 var shParent = sh.parentNode; //获取上海的下一个兄弟节点 var shNext = sh.nextSibling; shParent.insertBefore(tj, shNext); </script> </html>
练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>insertBefore.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul> <li id="cq" name="chongqing">重庆</li> <li id="sh" name="shanghai">上海</li> </ul> </body> <script language="JavaScript"> //插入新的节点 <li id="tj" name="tianjin">天津</li> 到<li id="sh" name="shanghai">上海</li>这个节点 // 如上海节点是最后一个节点插入到该节点的<li id="sh" name="shanghai">上海</li>的后面, // 否则插入到该节点的前面 //创建天津节点 var tj = document.createElement("li"); tj.setAttribute("id","sh"); tj.setAttribute("name","shanghai"); var tjText = document.createTextNode("天津"); tj.appendChild(tjText); //获取上海的节点 var sh = document.getElementById("sh"); //获取上海的父节点 var shParent = sh.parentNode; //判断上海节点的父节点的最后一个子节点是否是上海(sh)节点 //方法一: // if(shParent.lastChild.id=="sh"){ // shParent.appendChild(tj); // }else{ // shParent.insertBefore(tj,sh); // } //上海是最后一个子节点 //方法二: if(sh.nextSibling==null){ shParent.appendChild(tj); }else{ shParent.insertBefore(tj,sh); } </script> </html>
删除节点:
removeChild():从一个给定元素里删除一个子节点var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
如果想删除某个节点,但不知道它的父节点是哪一个,parentNode 属性可以帮忙。
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul> var liElement=document.getElementById("beijing"); var parentElement=liElement.parentNode; parentElement.removeChild(liElement);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>insertBefore.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script language="JavaScript"> //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul> //获取北京的元素节点 var bj = document.getElementById("bj"); //获取北京的父节点 var bjParent = bj.parentNode; //删除北京 var index = bjParent.removeChild(bj); alert(index.id); </script> </html>
遍历节点树:
ChildNodes:返回一个数组,这个数组由给定元素节点的子节点构成:var nodeList = node.childNodes;
文本节点和属性节点都不可能再包含任何子节点,所以它们的 ChildNodes 属性永远会返回一个空数组。
如果想知道某个元素有没有子节点,可以用 hasChildNodes 方法。
如果想知道某个元素有多少个子节点,可以用 childNodes 数组的 length 属性。
childNodes 属性是一个只读属性。
获取第一个子节点:
firstChild:该属性返回一个给定元素节点的第一个子节点,返回这个节点对象的指针。var reference = node.firstChild;
文本节点和属性节点都不可能包含任何子节点,所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点,即:
var reference = node.ChildNodes[0];
firstChild 属性是一个只读属性。
获取最后一个子节点:
lastChild:对应 firstChild 的一个属性。nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode:返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。
previousSibling:返回一个给定节点的上一个兄弟节点
innerHTML属性:
浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <script language="JavaScript"> window.onload = function(){ var city = document.getElementById("city"); //读取div中的文本fff的值 alert(city.innerHTML); //在div层中插入 <h1>今天</h1> city.innerHTML = "<h1><font color='red'>今天</font></h1>"; //innerHTML和innerText的区别 //innerHTML可以解析HTML标签 //innerText不能解析HTML标签 city.innerText = "<h1><font color='red'>今天</font></h1>"; } </script> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <div id="city"> fff </div> </body> </html>练习:
user.xml
<!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>添加用户</title> </head> <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> <button id="addUser">提交</button> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=Jerry">Delete</a></td> </tr> </tbody> </table> </center> </body> <script language="JavaScript"> //当文档加载完毕, 才执行该函数体的内容 window.onload = function(){ document.getElementById("addUser").onclick = function(){ /* 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> */ //获取相应的值 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var tel = document.getElementById("tel").value; /* <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=Jerry">Delete</a></td> </tr> */ //创建4个td和1个tr //第一个td <td>Jerry</td> var tdName = document.createElement("td"); var textName = document.createTextNode(name); tdName.appendChild(textName); var tdEmail = document.createElement("td"); var textEmail = document.createTextNode(email); tdEmail.appendChild(textEmail); var tdTel = document.createElement("td"); var textTel = document.createTextNode(tel); tdTel.appendChild(textTel); //<td><a href="deleteEmp?id=Jerry">Delete</a></td> var tdDelete = document.createElement("td"); var aE = document.createElement("a"); aE.setAttribute("href","deleteEmp?id="+name); var textDelete = document.createTextNode("Delete"); aE.appendChild(textDelete); tdDelete.appendChild(aE); //创建一个tr,并将4个td添加到tr中 var tr = document.createElement("tr"); tr.appendChild(tdName); tr.appendChild(tdEmail); tr.appendChild(tdTel); tr.appendChild(tdDelete); /* <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> */ //将tr添加到tbody中 //获取table对象 var usertable = document.getElementById("usertable"); //获取table中的tbody //该方法,IE浏览器支持,火狐浏览器不支持 // var tbody = usertable.firstChild; //将tr添加到tbody中 // tbody.appendChild(tr); //即让IE浏览器支持,火狐浏览器也支持 //创建一个tbody var tbody = document.createElement("tbody"); //在创建的tbody中添加tr tbody.appendChild(tr); usertable.appendChild(tbody); //处理删除,将添加的一行删除 aE.onclick = function(){ return deleteTr(this); } } function deleteTr(aE){ /* <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=Jerry">Delete</a></td> </tr> */ var name = aE.parentNode.parentNode.firstChild.firstChild.nodeValue; var flag = window.confirm("您确定要删除["+name+"]吗?"); if(flag){ //查找tbody var tbody = aE.parentNode.parentNode.parentNode; //查找tr var tr = aE.parentNode.parentNode; //tbody删除tr tbody.removeChild(tr); } return false; } } </script> </html>
相关文章推荐
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
- javascript节点操作DOMDocument属性和方法(转载)
- javascript内置对象
- JS 循环遍历JSON数据
- 基于JavaScript实现文字超出部分隐藏
- js正则表达式中关于零宽断言的奇异现象
- jsTree 的简单用法--异步加载和刷新数据
- javascript实例学习之一——联动下拉框
- JSP_004_Cookie介绍03—Cookie的domain(域)
- js刷新页面不回到顶部
- Respond.js在IE8失效原因分析
- js鼠标移动导航菜单出现下拉菜单
- javascript判断浏览器的版本
- javascript原生代码实现ajax请求
- Javascript 常用系统内置函数
- js中arguments的作用
- js正则函数中test和match的区别
- 《JS高程》引用类型学习笔记
- JS 面向对象之继承 -- 原型链
- javascript BOM与DOM介绍