获取元素节点（DOM基础）

来源：互联网发布：安卓刷机软件哪个最好编辑：程序博客网时间：2024/04/30 19:39

一、DOM
      简介：以一种独立于平台和语言的方式访问和修改（添加、移动、改变或移除的方法和属性）一个文档（主要是网页）的内容和结构。是表示和处理一个HTML或XML文档的常用方法。

      节点的定义：D（Web网页文档）O（document对象）M（网页文档的树形结构）M中树形结构可以理解为由节点组成。把每个标签看作一个节点。

      节点的分类：以一个完成的标签为例<div id ="box">测试Div</div>
            元素节点：是标签<div></div>
            文本节点：是标签内的纯文本，测试Div
            属性节点:   是标签的属性，id="box"

二、获取节点：
既然要对页面进行操作首先获取界面的内容，主要是通过获取节点来对页面内容来进行操作。下面提供部分界面html，后面的js代码主要对给代码进行操作。

界面html：

<body>     <span>开始</span>     <div name="test"  id = "box"   aaa ="bbb"  >        <p>测试Div1</p>        <p>测试Div2</p>        <p>测试Div3</p>      </div>     <div id ="pox">测试<em>倾斜</em>结尾</div>     <span>结束</span></body >

1、元素节点
（1）获取元素节点
1)getElementById() :通过特定的ID来获取元素节点。

js代码：

    window.onload=function(){           var box = document.getElementById('box');           alert(box);      //返回值HTMLDivElement表示Div的节点对象           lert(box.tagName);   //返回元素节点对象的标签名     } ;

2)getElementByTagNamename() :通过元素节点名获取相同元素节点名的集合
js代码：

      window.onload=function(){    var p = document.getElementsByTagName('p');alert(p);     //返回一个数组集合，HTMLCollectionalert(p.length);       //返回p数组的数量alert(p[0]);       //返回p的节点对象alert(p.item(0));  //同上alert(p[0].tagName);      //LIalert(p[0].innerHTML);  //返回节点的文本内容：测试Div1          var all= document.document.getElementsByTagName('*');          alert(all.length)  //网页中所有节点的数量 }

3)getElementByName() :通过name属性的值获取元素节点的集合。
js代码：

<pre name="code" class="javascript">  window.onload=function(){  var box = document.getElementsByName('test')[0];  alert(box);  //返回节点对象     }

说明：name属性一般出现在表单中，在其他节点中添加name属性会认为为不合法属性，Firefox和Google可以获取HTML中不合法的name，低版本的IE获取不到。

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

（2）通过节点属性得到元素

1）node属性：来获取节点的名称、类型、值。

js代码：

     window.onload=function(){  节点属性  var box = document.getElementById('box');  alert(box.nodeName);   //显示DIV     元素名  alert(box.nodeType);    //显示1          节点类型  alert(box.nodeValue);   //显示null       原因元素节点本身没有内容  };

注意：node只能获取当前节点的东西，在上面的js代码中node本身把节点指针放在元素<div></div>上，所以本身没有value值，

     2）层次节点属性：层级节点可以分为父子节点和兄弟节点，通过当前节点可以获取其他层次的节点。
     2.1）子节点childNodes、第一个字节点firstChilds、最后一个子节点lastChilds。
     js代码：

 window.onload=function(){ 子节点          var pox = document.getElementById('pox');         alert(pox.childNodes.length) //子节点数量          alert(pox.childNodes[0].nodeValue); // 第一个子节点的内容          alert(pox.firstChild.nodeValue);  // 第一个子节点的内容          alert(pox.lastChild.nodeValue); // 最后一个节点的内容  };

2.2）父节点parentChild、兄弟节点previousSibing,nextSibing。
js代码：

window.onload=function(){     父节点，上下节点 var pox = document.getElementById('pox'); alert(pox.parentNode);    //pox节点的父节点body节点 alert(pox.firstChild.nextSibling);    //pox节点的子节点中第一个节点的下一个节点 alert(pox.lastChild.previousSibling);   //pox节点的子节点中最后一个节点的上一个节点 alert(pox.lastChild.previousSibling.nodeName)};

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

2、属性节点

1)直接.出HTML属性的属性值。
js代码：

 window.onload=function(){        var box = document.getElementById('box');alert(box.id);   //返回值为box alert(box.aaa);   // 不显示定义的属性值。返回undefinedalert(box.class); //返回undefined  class为js的关键字alert(box.className);  //返回class属性的值cd}

2）getAttribute()获取某个属性的属性值。
js代码：

   window.onload=function(){       var box = document.getElementById('box');       alert(box.getAttribute('aaa'))  //这种方式可以获得自定义属性的属性值。       alert(box.getAttribute('className')) //返回为null       alert(box.getAttribute('class') )  //返回class属性的属性值}

3）通过节点属行获得
js代码：

   window.onload=function(){    属性 var pox = document.getElementById('pox'); alert(box.attributes);   //集合数组，保存元素节点的属性列表 alert(pox.attributes.length);     //该节点的属性的个数 alert(pox.attributes[0]);      //Attr  ，属性节点 alert(pox.attributes[0].nodeName);//第一个属性的属性名          //遍历属性集合读取属性的时候，是从后向前进行的。 };

4）setAttribute()设置属性
js代码：

   window.onload=function(){var box = document.getElementById('box');    alert(box.setAttribute('title','标题'))  //添加title属性和值    alert(box.setAttribute('style','color:red')) //添加style属性和值}

5）removeAttribute()移除属性
js代码：

   window.onload=function(){        var box = document.getElementById('box');        alert(box.removeAttribute('title'))  //移除title属性}

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

3、内容节点
1）innerHTML获取当前元素节点的文本内容
js代码：

 window.onload=function(){         var box = document.getElementById('box');         alert(box.innerHTML);   //显示当前元素节点中的文本内容（包括HTML） //var box = document.getElementById('box'); //box.innerHTML='玩转<strong>JS</strong>'; //赋值，可以解析里面的HTML。}

2）文本节点nodeVlaue和innerhTML的区别

   window.onload=function(){          var pox = document.getElementById('pox');       pox.childNodes[0].nodeValue='测试<strong>Pox</strong>';  //测试<strong>Pox</strong>倾斜结尾               //pox.innerHTML='测试<strong>Pox</strong  ;  测试Pox（Pox大写） };

注意：区别1：前者把赋值的文本中html解析为特殊字符，后者当做html来显示。

区别2：前者是得到文本节点来显示文本，后者是通过元素节点（.）点出该节点的文本内容。

三、总结
主要讲解了下Dom基础中如何获得三种的节点，然后通过三种节点来进行基本的操作，Dom作为对页面的操作还有更多的内容需要学习，而且只有在应用中才能更好的理解。现在只是基本的知识总结，以后随着认识的加深在做相应的总结。

2 0

获取元素节点（DOM基础 ）

获取元素节点（DOM基础）