锋利的JQuery----JavaScript基础知识（二）

最新推荐文章于 2022-04-29 20:24:50 发布

追赶的蜗牛

最新推荐文章于 2022-04-29 20:24:50 发布

阅读量957

点赞数

分类专栏：读书笔记 jQuery js 文章标签： DOM文档对象模型

本文链接：https://blog.csdn.net/yansong_8686/article/details/13615965

版权

js 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

jQuery

22 篇文章 0 订阅

订阅专栏

读书笔记

8 篇文章 0 订阅

订阅专栏

一、DOM文档对象模型

1.DOM中的节点：

a).元素节点：即是DOM的原子节点，其nodeType值为1，如<h1>、<div>、<body>

b).属性节点：即元素的属性，其nodeType值为2，如<a href="href1">xxxxx</a> 其中的href即是属性节点

c).文本节点：nodeType值为3，如<a href="href1">xxxxx</a> 其中的xxxxx即为文本节点

d).注释节点

2.操作元素内的文本：

<div id="test">Test</div> var x = document.getElementById("test"); alert(x.innerText);//Test

但是在FireFox上就是undefined，即innerText不兼容FireFox.

一个通用的函数用来获取任意元素的文本内容：

function text(e){

var t="";

e=e.childNodes || e;

//假定e是一个数组

for(var j=0;j<e.length;j++){

//不是元素节点，则追加文本，否则，继续递归遍历所有元素节点的子节点

t+=e[j].nodeType != 1 ? e[j].nodeValue;text(e[j].childNodes);

}

return t;//返回匹配的文本

}

上例中，可以alert(text(x)); 即可以在FireFox中使用啦。

======================================================

　　 childNodes 属性可返回指定节点的子节点的节点列表，也就是包含在容易内的所有控件与文本属性字段，如果希望得到这些中的某些，必须通过类别属性进行筛选。
　　        childNodes常用属性：
　　        nodeValue：nodeValue适用于“文本节点（<td>中的文本内容）”和“属性节点”；对应“文档节点”和“标签节点（li）”不起作用
　　        nodeName：元素节点的 nodeName 是标签名称
            属性节点的 nodeName 是属性名称
            文本节点的 nodeName 永远是 #text
            文档节点的 nodeName 永远是 #document
            nodeType:返回的数值 1：元素节点、2：属性节点、3：文本节点
            firstChild：返回容器内的第一个控件对象，可以利用这个返回对象去获取该控件的属性信息
            parentNode：返回子节点对象外层的父对象，可以利用这个返回父对象去获取该控件的属性信息
            previousSibling:获取同级节点上级节点对象，可以利用这个返回对象去获取该节点的属性信息
            nextSibling：获取同级节点下级节点对象，可以利用这个返回对象去获取该节点的属性信息
    语法：
　　        nodeObject.childNodes
        提示和注释
　　        提示：请使用 length 属性来计算一个节点列表中节点的数目。当你已获悉节点列表的长度后，您就可以轻松地循环遍历此列表，并提取您所需要的值！
        实例
　　        在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。　　
　　        下面的代码片段显示了此XML文档的子节点：　　
　　        xmlDoc=loadXMLDoc("books.xml"); 　　
　　        var x=xmlDoc.childNodes; 　　
　　        for (i=0;i<x.length;i++) { document.write("Nodename: " + x[i].nodeName) document.write(" (nodetype: " + x[i].nodeType + ")<br />") }

======================================================

3.操作元素内的HTML-----DOM元素的一个额外属性：innerHTML

所以用innerHTML这一属性，可以从一个元素中提取到所有的HTML和文本！

如果元素仅包含文本而不包含任何子元素，则返回的字符串只包含文本，故该方法可以取代上一个text(e) 方法，不用区分浏览器啦！

<div id="test">测试<b>innerHTML属性</b></div>

var x = document.getElementById("test"); alert(x.innerHTML);//测试<b>innerHTML属性</b>

2中的

<div id="test">Test</div> var x = document.getElementById("test"); alert(x.innerHTML);//Test

这样innerHTML兼容FireFox.

二、操作DOM节点

1.创建DOM节点：

createElement(tagName) 创建标签名为tagName的标签

createTextNode(data) 创建以data为内容的文本节点

----------------------------------------------------------------------------

var newDiv = document.createElement("div");

newDiv.setAttribute("id","newDiv");//设置一个id属性，用getAttribute("id")获取。

var bodyTags = document.getElementsByTagName("body");

var thisBody = bodyTags[0];

thisBody.appendChild(newDiv);//将节点newDiv 添加到childNodes的末尾

var textNode = document.createTextNode("new div");

newDiv.appendChild(textNode);//将new div这一文本添加到 newDiv 这个div中

2.插入DOM节点：

区分insertBefore()和appendchild()

如： ulVar.insertBefore(newLi,oldulVar);

来看个这个简单的实例：在id为box-one 的末尾添加一个子节点div

 
  < 
  div  
  class 
  ="btns" 
  >< 
  input  
  type 
  ="button" 
   value 
  ="插入元素" 
   id 
  ="creatbtn" 
  /></ 
  div 
  > 
  
  
  < 
  div 
    
    
   id 
  ="box-one" 
  > 
  
  
  < 
  p  
  class 
  ="con2" 
   id 
  ="p1" 
  > 
  1 
  </ 
  p 
  > 
  
  
  < 
  p  
  class 
  ="con2" 
  > 
  2 
  </ 
  p 
  > 
  
  
  < 
  p  
  class 
  ="con2" 
  > 
  3 
  </ 
  p 
  > 
  
  
  </ 
  div 
  > 
 

 
   
 
 
  window.onload  
  = 
  function 
   () {
  
  var 
   btn  
  = 
   document.getElementById( 
  " 
  creatbtn 
  " 
  );
 
 btn.onclick  
  = 
  function 
  () {
 insertEle();
 }
 }
  
  function 
   insertEle() { 
  
  var 
   oTest  
  = 
   document.getElementById( 
  " 
  box-one 
  " 
  );
  
  var 
   newNode  
  = 
   document.createElement( 
  " 
  div 
  " 
  );
 
 newNode.innerHTML  
  = 
  " 
   This is a newcon  
  " 
  ;
  
  // 
  oTest.appendChild(newNode); 
  
  
  oTeset.insertBefore(newNode, 
  null 
  );  
  // 
   这两种方法均可实 
  现
  
  
 } 
 
 
   
 

这个insertBefore 的第一个参数和appendChild的一样，都是那个新的节点变量，而insert第二个参数不仅可以为null 。也可以这样写呢

 
   
 
 
  function 
   insertEle() { 
  
  var 
   oTest  
  = 
   document.getElementById( 
  " 
  box-one 
  " 
  );
  
  var 
   newNode  
  = 
   document.createElement( 
  " 
  div 
  " 
  );
  
  var 
   reforeNode  
  = 
   document.getElementById( 
  " 
  p1 
  " 
  );
 
 newNode.innerHTML  
  = 
  " 
   This is a newcon  
  " 
  ; 
    
    
  
  
  oTest.insertBefore(newNode,reforeNode);  
  // 
  新建的元素节点插入到 id为p1的元素前面
  
  
 } 
 
 
   
 

或者

 
   
 
 
  function 
   insertEle() { 
  
  var 
   oTest  
  = 
   document.getElementById( 
  " 
  box-one 
  " 
  );
  
  var 
   newNode  
  = 
   document.createElement( 
  " 
  div 
  " 
  );
  
  var 
   reforeNode  
  = 
   document.getElementById( 
  " 
  p1 
  " 
  );
 
 newNode.innerHTML  
  = 
  " 
   This is a newcon  
  " 
  ;
 oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面，
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是说 插入id为p1节点元素的后面。
 
 } 
 
 
   
 

这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。

reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。

previousSibling - 取得某节点的上一个同级节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

3.删除节点：removeChild(toRemoveVar);

//删除一个独立的DOM节点

function remove(elem){

if(elem){

elem.parentNode.removeChild(elem);

}

//删除一个元素的所有子节点

funtion empty(elem){

while(elem.firstChild){

remove(elem.firstChild);//调用上面的函数

}

------------------------------------------------

移除子节点，那么可以变通一下来实现移除指定的节点，我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。

function removeElement(_element){

var _parentElement = _element.parentNode;

if(_parentElement){

_parentElement.removeChild(_element);