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 相关文章推荐
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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.ini中文版(1)
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
保护环境倡议书范文
2014/05/13 职场文书
小学运动会口号
2014/06/07 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python类方法总结讲解
2021/07/26 Python
Python字符串的转义字符
2022/04/07 Python
vscode内网访问服务器的方法
2022/06/28 Servers
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技