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包括了鼠标的位置信息,所以我突发 ...
随机推荐
- 如何用比较快速的方法掌握Spring的核心——依赖注入,Java web轻量级开发面试教程 读书笔记
我们知道,Java方面的高级程序员一定得掌握Spring的技能,其中包括Spring 依赖注入(IOC),面向切面(AOP),和数据库的整合(比如和Hibernate整合或声明式事务等)以及Sprin ...
- Android 日夜间切换Demo
这是其中一种实现模式,也是比较麻烦的一种,首先写布局,不多说上代码 activity_main.xml <?xml version="1.0" encoding=" ...
- Wireshark抓包TCP三次握手数据
抓包工具 - Wireshark(详细介绍与TCP三次握手数据分析) 功能使用的详细介绍 wireshark(官方下载网站: http://www.wireshark.org/),是用来获取网络数据封 ...
- CCIE-MPLS VPN-实验手册(下卷)
10:跨域的MPLS VPN (Option A) 10.1 实验拓扑 10.1 实验需求 a. R1 R2 R3 组成P-NETWORK R1 R2 R3 位于AS 1,底层协议采用EI ...
- return 的使用
(一):while中使用return //编译不通过,编译器不知道isTrue()方法是否会返回true,这样不能test()方法一定有返回值. public String test(){ while ...
- spring在扫描包中的注解类时出现Failed to read candidate component错误
出现:org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate componen ...
- 201521123056 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- Java 最常用类(前100名)来自一万个开源项目
大部分的 Java 软件开发都会使用到各种不同的库.近日我们从一万个开源的 Java 项目中进行分析,从中提取出最常用的 Java 类,这些类有来自于 Java 的标准库,也有第三方库.每个类在同一个 ...
- JVM(三)内存回收(一)
最近花了相当长一段时间在看Hotspot JVM的GC和内存分配,本节先总结和回顾一下内存回收的相关知识点,内存的分配放到下节再讨论. 一.什么是JVM的GC GC即Garbage Collectio ...
- Selenium_WebDriver_元素方法
版权声明:本文为博主原创文章,转载请注明出处. 前面已经学习了定位元素,定位只是第一步,定位之后需要对这个元素进行操作,如在百度搜索首页的输入框进行输入文本,对"百度一下"按钮进行 ...