JavaScript知识归纳（2）
来源：互联网 发布：淘宝网app 电脑版下载 编辑：程序博客网 时间：2024/05/22 08:29
替换节点：
- 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浏览器支持，火狐浏览器也支持//创建一个tbodyvar tbody = document.createElement("tbody");//在创建的tbody中添加trtbody.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){//查找tbodyvar tbody = aE.parentNode.parentNode.parentNode;//查找trvar tr = aE.parentNode.parentNode;//tbody删除trtbody.removeChild(tr);}return false;}}</script></html>
0 0
- JavaScript知识归纳（2）
- JavaScript知识归纳（1）
- JavaScript知识归纳（3）
- sql知识归纳2
- JavaScript面向对象核心知识归纳
- CSS知识归纳—2
- javascript常用技巧归纳2
- javascript常用技巧归纳2
- C# 接口（知识要点归纳总结）
- 学习weblogic时知识归纳（一）
- 学习Weblogic时知识归纳（二）
- JavaScript 基础知识总结归纳（一）
- JavaScript基础（一）--基础知识归纳
- JavaScript知识点归纳之教程（一）
- JavaScript知识点归纳之教程（二）
- javascript语法总结归纳（二）
- 小知识归纳
- 图的知识归纳
- MATLAB主要特性http://cn.mathworks.com/products/matlab/
- ROS 进阶学习笔记（13） - Combine Subscriber and Publisher in Python, ROS
- Eclipse下，html中thymeleaf自动提示的设定
- Shell变量
- MFC/VC 获取其他类指针
- JavaScript知识归纳（2）
- vs2012 error c4996: 'fopen': This function or variable may be unsafe
- Objective-C特性：Runtime
- 利用XShell上传、下载文件（使用sz与rz命令），超实用！
- js实现快捷键绑定按钮点击事件
- DBMS_REPAIR packag使用
- 每天进步一点点-tricks
- DDMS的使用、内存溢出的调试和模拟器的启动命令参数
- SlidingMenu菜单栏的使用
