JavaScript知识归纳（2）

替换节点：

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>

JavaScript知识归纳（2）相关推荐

Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
JavaScript知识（二）
JavaScript知识(二) 原文:JavaScript知识(二) 你要保守你心,胜过保守一切,因为一生的果效,是由心发出的.----O(∩_∩)O... ...O(∩_∩)O...老师因有事下午没 ...
MySql常用知识归纳整理（收藏）
MySql常用知识归纳整理(收藏) 一.连接与退出二.导入导出--推荐Navicat For Mysql 三.修改密码与增加用户权限四.结构化查询语言一.DDL:数据定义语言二.DML: 数据 ...
【思维导图】巩固你的JavaScript知识体系
[思维导图]前端开发JavaScript-巩固你的JavaScript知识体系版权声明:转载自CSDN博主「达达前端」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本 ...
STC8A 应用知识归纳
STC8A 应用知识归纳串口通信串口寄存器介绍功能定时器.计数器定时器寄存器介绍看门狗:复位看门狗寄存器操作外部中断 ADC ADC寄存器介绍串口通信每个串行口有两个数据缓冲器(S ...
STM32应用知识归纳
STM32应用知识归纳 GPIO 1.1 GPIO基本结构 1.2 GPIO工作方式 1.3 GPIO寄存器 NVIC 中断优先级管理时钟系统 1.1 SYSCLK 系统定时器 / 滴答定时器 1. ...
干货！原始数据中的反绎知识归纳
点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入! 在许多机器学习任务中,既存在着充满噪声的原始输入,又需要复杂的推理能力.因此,设计一个合适的端到端学习算法非常困难.神经符号学习将此类任 ...
Kotlin知识归纳（一） —— 基础语法
android Kotlin系列: Kotlin知识归纳(一) -- 基础语法 Kotlin知识归纳(二) -- 让函数更好调用 Kotlin知识归纳(三) -- 顶层成员与扩展 Kotlin知识归纳 ...
Kotlin知识归纳（四） —— 接口和类
android Kotlin系列: Kotlin知识归纳(一) -- 基础语法 Kotlin知识归纳(二) -- 让函数更好调用 Kotlin知识归纳(三) -- 顶层成员与扩展 Kotlin知识归纳 ...

JavaScript知识归纳（2）

替换节点：

查找属性节点：

设置属性节点：

创建新元素节点：

创建新文本节点：

插入节点（1）：

插入节点（2）：

插入节点（3）：

删除节点：

遍历节点树：

获取第一个子节点：

获取最后一个子节点：

innerHTML属性：

JavaScript知识归纳（2）相关推荐

最新文章

热门文章

JavaScript知识归纳（2）

替换节点：

查找属性节点：

设置属性节点：

创建新元素节点：

创建新文本节点 ：

插入节点（1）：

插入节点（2）：

插入节点（3）：

删除节点：

遍历节点树：

获取第一个子节点：

获取最后一个子节点：

innerHTML属性：

JavaScript知识归纳（2）相关推荐

最新文章

热门文章

创建新文本节点：