javascript中的DOM介绍（一）
一、基础知识点
1、DOM是文档对象模型，是针对HTML和XML文档的一个API（应用程序接口）
2、DOM描绘了一个层次化的节点数，允许开发人员进行添加，移除个修改等操作
3、IE浏览器中所有的DOM对象都是以COM对象形式实现的，因此出现了不少不可兼容的东西
二、Node.ELEMENT_NODE常量
1、经本人实测，因为此常量在IE9以下就不支持了，所以一般在检测元素的时候都会用nodeType属性，而nodeType属性根据元素的类型不同，用12个常量值来表示，比如元素节点nodeType值即为1，文本节点的nodeType值即为3，属性节点的nodeType值即为2，等等。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("box");
var aLis=oDiv.childNodes;
for(var i=0;i<aLis.length;i++){
if(aLis[i].nodeType!=3){
console.log(aLis.nodeName); }
} }
</script>
</head>
<body>
<div id="box">
<ul>
<li></li>
</ul>
</div>
</body>
</html>
ul为元素节点，所以输出的值就是1。
在上述代码中有几点需要说明：
1）首先我们通过getElementById()；获取元素，再通过nodeChilds获得该元素下的子节点，因为元素节点的nodeType值是1，所以我们可以通过if判断和for循环就能找到并输出我们所要找的那个节点的nodeName；
另外，需要强调的是，当我们在通过nodeChilds寻找子节点的时候，换行也会被解析成文本节点，而文本节点往往不是我们所要寻找的那个节点，所以我们可以进行if条件筛选。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("box");
var list=oUl.childNodes;
console.log(list[0]);
console.log(list.item(0));
}
</script>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
</ul>
</body>
</html>
2、以上代码，我们通过nodeChilds找到了ul下的所有子节点，我们可以通过list[0]方括号去访问找出它们，同时也可以使用item()方法来访问
此外，需要强调下的是，当我们用nodeChilds查询出来的结果，其实并不是Array的实例，虽然这么使用也无大碍，我们姑且将其转化数组，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("box");
var list=oUl.childNodes;
// console.log(list[0].nodeName);
// console.log(list.item(0).nodeName);
var arrOfNodes=Array.prototype.slice.call(list,0);
console.log(arrOfNodes);
}
</script>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
</ul>
</body>
</html>
Array.prototype.slice.call(list,0)，此方法可在IE8以上，及其他浏览器上，都可正常运行IE8以下则出现错误，在IE8及以下需要枚举转为数组，改进代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("box");
var list=oUl.childNodes;
// console.log(list[0].nodeName);
// console.log(list.item(0).nodeName);
// var arrOfNodes=Array.prototype.slice.call(list,0);
// console.log(arrOfNodes);
function convertArray(nodes){
var arr=null;
try{
arr=Array.prototype.slice.call(nodes,0);//此针对非IE8及以下的浏览器
}catch(ex){
arr=new Array();//针对IE8及以下的浏览器，进行枚举，转为数组
for(var i=0,len=nodes.length;i<len;i++){
arr.push(nodes[i]);
}
}
return arr;
} var arrOfNodes=convertArray(list);
console.log(arrOfNodes);
}
</script>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
</ul>
</body>
</html>
笔者在实际的测试过程中发现，在IE8及以下，换行的文本节点未计算在返回的数据中，这点与其他的浏览器稍有区别。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
function convertToArray(nodes){
var arr=null;
try{
arr=Array.prototype.slice.call(nodes,0);//此针对非IE8及以下的浏览器
}catch(ex){
arr=new Array();//针对IE8及以下的浏览器，进行枚举，转为数组
for(var i=0,len=nodes.length;i<len;i++){
arr.push(nodes[i]);
}
}
return arr;
}
var oUl=document.getElementById("ul1");
console.log(oUl.parentNode);//parentNode是body
// alert(oUl.parentNode);
list=oUl.childNodes;
// alert(list);
var arrOfNodes=convertToArray(list);
alert(arrOfNodes[0].previousSibling);
alert(arrOfNodes[0].nextSibling);
alert(arrOfNodes[4].previousSibling);
alert(arrOfNodes[4].nextSibling);
}
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
本节暂且到这，下节梳理下节点操作的内容
javascript中的DOM介绍（一）的更多相关文章
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
- Javascript中的delete介绍
关于JavaScript中的Delete一直没有弄的很清楚,最近看到两篇这方面的文章,现对两文中部分内容进行翻译(内容有修改和添加,顺序不完全一致,有兴趣推荐看原文),希望能对大家有所帮助 一.问题的 ...
- JavaScript 中的函数介绍
简而言之函数只不过是一组执行某个操作的语句.函数可能会有一些输入参数(在函数体中使用),并在执行后返回值. JavaScript函数也具有这些特性,但它们不仅仅是常规函数.JavaScript函数是对 ...
- 一些JavaScript中的DOM的优化小技巧
在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...
- Javascript中的DOM实现显示鼠标的空间位置
为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发 ...
随机推荐
- 如何搭建Zookeeper集群
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的 ...
- nginx 安装和配置
1. 安装相关依赖 yum install readline-devel pcre-devel openssl-devel zlib-devel gcc gcc-c++ gd-devel libxml ...
- JVM中锁优化，偏向锁、自旋锁、锁消除、锁膨胀
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt364 本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同 ...
- jQuery常用工具方法
前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...
- 从web图片裁剪出发：了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...
- 个人总结-Alpha阶段
一.个人总结 经过几周的Alpha阶段,对于软件设计有了大概的认识,也深刻感觉到一款软件设计出来的不易,每款软件背后都是开发人员辛勤的汗水.在软件开发的过程中,也是会出现很多的问题,出现各种各样的bu ...
- 201521123018 《Java程序设计》第1周学习总结
1. 本章学习总结 *Java程序的特点 *可以跨平台运行 *语言简单 *利用控制台运行java程序 *cmd调出控制台->用javac指令编译源代码->用java指令运行 2. 书面作业 ...
- linux下修改rm命令防止误删除
前言:相信很多朋友都遇到过在linux下用rm命令误删除文件的时候,此刻的心中仿佛有无数的羊驼在奔腾.那么怎么防止这种情况发生呢?当然是有方法的,我们可以写一个shell脚本,改变一下rm命令的作用. ...
- 32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址
32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件中有保存的 但是高版本有了随机基址,那么要怎么解决这 ...
- Linux文件管理_1
在Linux中,全部都是文件,所以文件管理在Linux上格外重要,在我们学习文件管理前,我们先学习几个关于文件的命令,之后才能更好的学习文件管理. 目录 pwd命令 cd命令 列出文件内容ls 查看文 ...