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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
js实现自动锁屏功能
Jun 02 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购物网站支付paypal使用方法
2010/11/28 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python 换位密码算法的实例详解
2017/07/19 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python 函数返回值的示例代码
2019/03/11 Python
pandas删除指定行详解
2019/04/04 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
使用python实现画AR模型时序图
2019/11/20 Python
flask开启多线程的具体方法
2020/08/02 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
为什么要做架构设计
2015/07/08 面试题
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python