javascript DOM的详解及实例代码


Posted in Javascript onMarch 06, 2017

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,那么就一定要注意一些陷阱,同时也要多花时间琢磨。 

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

Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
vue实现简单图片上传
Jun 30 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 #Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 #Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 #Javascript
Bootstrap模态框案例解析
Mar 05 #Javascript
video.js使用改变ui过程
Mar 05 #Javascript
Angular开发者指南之入门介绍
Mar 05 #Javascript
You might like
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
js图片无缝滚动插件使用详解
2020/05/26 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python之import机制详解
2014/07/03 Python
Python入门篇之对象类型
2014/10/17 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Android面试题及答案
2015/09/04 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
一套C#面试题
2013/10/09 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
化学教师自荐信范文
2013/12/28 职场文书
会议接待欢迎词
2014/01/12 职场文书
学生吸烟检讨书
2014/09/14 职场文书
会计实训报告范文
2014/11/04 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
如何在Python项目中引入日志
2021/05/31 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js