javascript DOM的详解及实例代码

2024-02-28 06:46:05 124

javascriptDOM总结

一直以为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(它已经是最顶层的节点，树的根节点)

tipone(文档的子节点):

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

tiptwo(文档的相关信息):

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

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

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

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

tipthree(文档查找元素):

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

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

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

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

2.元素节点

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

varele=document.getElementById("element");//通过document取到一个标签对象
console.log(ele.nodeType);//1
console.log(ele.nodeName);//返回元素的标签名
console.log(ele.nodeValue);//永远返回null!

tipone(html元素):

vardiv=document.getElementById("div");

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

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

3.console.log(div.title);//"Bodytext"

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

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

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

1.div.getAttribute("id");//"myDiv"

2.div.setAttribuye("id","yourDiv");//id已变动

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

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

tipthree(元素的子节点):

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


Item1
Item2
Item3


varmL=document.getElementById("myList");
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来

console.log(mL.childNodes);//7
//?!怎么会有7个?

//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤

for(vari=0,len=ml.childNodes.length;i//最好的方法可以这么做
//如果元素对象内部标签名是一样的
varitems=ml.getElementsByTagName("li");//能得到三个li节点对象

3.文本节点

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

varmyDiv=document.getElementById("myDiv")//取到元素节点 vartx=myDiv.childNodes[0]//前面也提过childNodes的特性，这次取到了文本节点 console.log(tx.nodeType)//3 console.log(tx.nodeName)//所有文本节点的nodeName都是"#text"; console.log(tx.nodeValue)//123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 //所以其父节点显然是个元素节点.

Tipone:

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

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

vara=document.createElement("p");

varb=document.createTextNode("123");

a.appendChild(b);

document.body.appendChild(a);

这样在body末尾会出现

123

这样的标签

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

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

javascript DOM的详解及实例代码

热门推荐

随机推荐