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 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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 变量定义方法
2009/06/14 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
jQuery.deferred对象使用详解
2016/03/18 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
vue如何判断dom的class
2018/04/26 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue中监听返回键问题
2019/08/28 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
对Django url的几种使用方式详解
2019/08/06 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Numpy的简单用法小结
2019/08/28 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
采购文员岗位职责
2013/11/20 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
毕业生自荐信格式
2014/03/07 职场文书
三年级学生评语
2014/04/23 职场文书
投标保密承诺书
2014/05/19 职场文书
关于运动会的广播稿
2014/09/22 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
捐助感谢信
2015/01/22 职场文书
放假通知格式
2015/04/14 职场文书