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包括了鼠标的位置信息,所以我突发 ...
随机推荐
- wifi pineapple 外接USB无线网卡桥接外网
0:选择USB网卡 在没有有线网络的情况下,可以外挂一个usb无线网卡来桥接上网,目前支持3070L.8187L芯片的网卡,反正linux系统都用这些芯片, 免的安装驱动, 我选择的是 WN-722N ...
- TF-IDF学习（python实现）
从大一开始接触TF-IDF,一直觉得这个特别简单,,但是图样图森破,,, 即使现在来说,也似乎并非完全搞懂 核心思想: 计算词语在该文章中权重,与词语出现次数和词语价值有关 词语出现次数,重复即强调, ...
- 深入浅出数据结构C语言版（17）——有关排序算法的分析
这一篇博文我们将讨论一些与排序算法有关的定理,这些定理将解释插入排序博文中提出的疑问(为什么冒泡排序与插入排序总是执行同样数量的交换操作,而选择排序不一定),同时为讲述高级排序算法做铺垫(高级排序为什 ...
- IT团队之非正式沟通
沟通能力是一种能证明和让对方发现你具有社会工作能力的能力.从表面上看来,它只是一种能说会道的能力,可实际上它却包罗了一个人从穿衣打扮到言谈举止等一切行为的能力. 从大体上,我将沟通分为正式沟通 ...
- Nand Flash驱动(实现初始化以及读操作)
简单制作一个Nand Flash驱动(只需要初始化Flash以及读Flash) 打开2440芯片手册,K9F2G08U0M芯片手册(因为2440中Nand Flash是用的256MB(2Gb)内存,8 ...
- CCIE-MPLS基础篇-实验手册
又一部前期JUSTECH(南京捷式泰)工程师职业发展系列丛书完整拷贝. MPLS(Multi-Protocol Label Switching) 目录 1:MPLS 基础实验.... 1.1实验拓扑. ...
- 【Alpha阶段】第二次scrum meeting
每日任务: ·1.本次会议为第二次Meeting会议: ·2.本次会议于今日上午08:30第五社区五号楼下召开,会议时长15min. 一.今日站立式会议照片: 二.每个人的工作: 三.工作中遇到的困难 ...
- Java 第七周总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 我们知道ArrayList是允许重复的,有序的元素的集合,但当我们想用它来放 ...
- 201521123003《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123047 j第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 参考资料: 百度脑图 XMind 2. 书面作业 1.代码阅读:Child压缩包 ...