欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript DOM的详解及实例代码

程序员文章站 2024-02-10 18:26:52
javascript dom 总结 一直以为dom(文档对象模型)是js中最简单的一部分。不可否认,它确实很简单,因为dom的思维模式有点固定,只需要简单地记住一些固定的...

javascript dom 总结

一直以为dom(文档对象模型)是js中最简单的一部分。不可否认,它确实很简单,因为dom的思维模式有点固定,只需要简单地记住一些固定的方法,所以dom可以说是所有js(这里指的是客户端的js)入门的起手点。

  最近我在做一些有用到dom的练习时,发现自己的dom知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,dom嘛,也就调用调用几个方法,或者我直接使用jquery,根本不用考虑dom的细节。是,这也没错,jquery对dom的封装可谓前无古人,但是正如成长一样,跑之前是一定要会走的,所以我认为对dom必须要有比较详细的了解,于是我总结了如下的关于dom的一些使用方法。

  在w3c总结跪dom规范中,有一些十分常用的,也有些不怎么有用的,这里我们主要讨论常用一些dom操作(有关dom的基本概念在此就不介绍了):

  节点层次

  所谓节点层次,指的是html文档中存在具有各自特点,数据,方法的节点(例如标签),节点之间的关系构成了层次(其实可以想象成树状结构)。w3c的dom1级规范中定义了一个node接口。这个接口有一些方法是非常有用的:

  node.element_node;(元素节点)

  node.text_node;(文本节点)

  node.document_node(文档节点)

  而每个节点都有自己的节点类型标志,也就是nodetype属性,例如元素节点的nodetype == '1';文本节点的nodetype == '3';文档节点的nodetype == '9';

  1.文档节点

    文档节点在一个文档中用document对象表示,它的基本特征如下:

console.log(document.nodetype); // 9 
console.log(document.nodename); // #document 
console.log(document.nodevalue); // null 
console.log(document.parentnode); // null(它已经是最顶层的节点,树的根节点) 

   tip one (文档的子节点):

    1.document.documentelement可以取到html对象,同样可以通过document.childnodes[0]以及document.firstchild取到。然而 documentelement可以更快,更直接访问元素。

  tip two (文档的相关信息):

    1.取得文档标题 : document.title;

    2.取得完整的url : document.url;

    3.取得域名(ip) : document.domain;

    4.取得页面的url : document.referrer;

  tip three (文档查找元素):

    1.通过id : document.getelementbyid("xxx");  一般页面id会不同,若有多个相同id,则取到第一个有该id的元素。

    2.通过tagname : document.getelementsbytagname("xxx"); 返回标签名为"xxx"的元素集合!

    3.通过name : document.getelementbyname();

  理解document对象非常简单,兼容性做的也比较靠前。

  2.元素节点

  元素节点提供了对元素标签名,子节点及特性的访问。它的基本特征如下:

var ele = document.getelementbyid("element"); //通过document取到一个标签对象 
console.log(ele.nodetype); // 1 
console.log(ele.nodename); // 返回元素的标签名 
console.log(ele.nodevalue); //永远返回null! 

  tip one (html元素) :

    <div id="mydiv" class="bd" title="body text" lang="en" dir="ltr"></div>

    var div = document.getelementbyid("div");

    1. console.log(div.id); // "mydiv"

    2. console.log(div.classname); // "bd"

    3. console.log(div.title); // "body text"

    4. console.log(div.lang); // "en"

    5. console.log(div.dir); // "ltr"

  tip two (取得,设置和删除特性):

    1.div.getattribute("id"); // "mydiv"

    2.div.setattribuye("id","yourdiv"); // id已变动

    3.div.removeattribute("id"); //id已删除

    需要注意:  在ie7及以下的版本中,三种方法存在着一些异常行为,通过set设置class 和style特性,特别是事件处理程序时,没有任何效果,get也是同样的。因此一般开发要避免以上三种方法,推荐通过属性来设置特性。

  tip three (元素的子节点) :

    要重点提一下的就是这里了,有如下代码:

<ul id="mylist"> 
  <li>item 1</li> 
  <li>item 2</li> 
  <li>item 3</li> 
</ul> 
 
var ml = document.getelementbyid("mylist"); 
//很明显ml对象有三个元素节点,我们也知道用childnodes属性去找到节点数,然而陷阱随之而来 
 
console.log(ml.childnodes); // 7 
//?!怎么会有7个? 
 
//原因在于childnodes中不仅包含了元素节点,还有4个文本节点。因此需要过滤 
 
for(var i=0,len=ml.childnodes.length;i<len;i++){ 
   if(ml.childnodes[i].nodetype == "1"){ // 利用元素节点的特性 
     // .... 
   }   
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getelementsbytagname("li"); //能得到三个li节点对象 
  

 3.文本节点

  文本节点包含的是可以照字面解释的纯文本内容,纯文本中可以包含转义后的html字符,但不能包含html代码。文本节点的基本特征如下:

<div id="mydiv">123</div> 
 
var mydiv = document.getelementbyid("mydiv") //取到元素节点 
var tx = mydiv.childnodes[0] //前面也提过childnodes的特性,这次取到了文本节点 
 
console.log(tx.nodetype) // 3 
console.log(tx.nodename) // 所有文本节点的nodename都是"#text"; 
console.log(tx.nodevalue) // 123(节点包含的文本),注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点. 

 tip one :

    创建文本节点的两个方法:document.createtextnode(),document.createtext();

    创建好后不会直接嵌入文档中,需要引用。

var a = document.createelement("p");

    var b = document.createtextnode("123");

    a.appendchild(b);

    document.body.appendchild(a);

    这样在body末尾会出现<p>123</p>这样的标签

  个人认为dom肯定是学习js的入门点,但是也需要很长时间的打磨。我看了dom不少于三遍,仅仅是dom1级规范,每次都有些新东西。如果你学习dom,那么就一定要注意一些陷阱,同时也要多花时间琢磨。 

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!