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包括了鼠标的位置信息,所以我突发 ...
随机推荐
- 最简单实用的JQuery实现banner图中的text打字动画效果！！！
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- python--对配置文件进行搜索，增加新的内容
要求: 文件haproxy1.查 输入:www.oldboy.org 获取当前backend下的所有记录2.新建 输入: arg = {'backend': 'www.oldboy.org','rec ...
- 201521123084 《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 本周学习总结 ...
- JAVA基础第十组（5道题）
46.[程序46] 题目:两个字符串连接程序 package com.niit.homework1; import java.util.Scanner; /** * @author: Annie * ...
- 201521123007《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 以下是ArrayList的contains源代码: public bool ...
- 201521123027 《JAVA程序设计》第四周学习总结
1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ①多态:相同方法名,不同实现: ②instanceof运算符:判断父类引用所引用的对象实例的实 ...
- 201521123045-----《Java程序设计》第3周学习总结
---恢复内容开始--- 1. 本章学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private stati ...
- 201521123011 《Java程序设计》 第二周学习总结
1. 本周学习总结 记录本周学习中的重点 原则:少而精,自己写.即使不超过5行也可,但请一定不要简单的复制粘贴. 知道了c语言中string的定义与java不同的地方. 学习了枚举,数组等方法 Tnt ...
- 201521123089 《Java程序设计》第2周学习总结
1. 本周学习总结 ① java数组的使用.② String类,对象是不可变的,当新的字符串的内容与字符串池中的内容相同时,不是重新开辟新的内存存储,而是共享. 2. 书面作业 (1)使用Eclips ...
- Java-判断一个数是不是素数
import java.util.Scanner; /** * @author 薛定谔的猫 * java判断一个数是不是素数 * * 素数又称质数,是指在一个大于1的自然数中,除了1和本身之外,不能被 ...