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包括了鼠标的位置信息,所以我突发 ...
随机推荐
- 简单易学的SSM（Spring+SpringMVC+MyBatis）整合
SSM(Spring+SpringMVC+MyBatis)的整合: 具体执行过程:1.用户在页面向后台发送一个请求 2.请求由DispatcherServlet 前端控制器拦截交给SpringMVC管 ...
- Visual Studio2017数据库架构比较
一.前言 开发的时候在测试服务器上和线网服务器上面都有我们的数据库,当我们在线网上面修改或者新增一些字段后,线网的数据库也需要更新,这个时候根据表的修改记录,然后在线网上面一个一个增加修改很浪费效率而 ...
- 初遇.net
初遇.net 为了自己的理想我选择了.net课程进行自我提升,想想以后能成为一位程序猿不由得有点兴奋呢,还有另一件高兴的事是我认识了十几位来自不同区县的老师同学,都说人脉就是财富,是不是我的财富有多了 ...
- element-ui更换主题色
1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...
- Xamarin介绍
郑重声明: 本文非Xamarin使用详解,也没什么有用的干货,只是给不知道Xamarin到底是什么的大家提供一点点微不足道的小介绍,看完以后啥收获都没有也不是没可能的(*/ω＼*).so......ε ...
- [转载]Web前端和后端之区分，以及面临的挑战【转】
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
- JAVA基础第六组（5道题）
26.[程序26] 题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 判断第二个字母. 1.程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句 ...
- 201521123031《Java程序设计》 第2周学习总结
1. 本周学习总结 (1)能够更加熟练地使用码云 (2)学习了Arrys和String的用法和一些运用 (3)懂得如何查询函数的源代码,通过查看源代码,能够更深入的了解函数适用情况以及利弊 2. 书面 ...
- 201521123069 《Java程序设计》 第12周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2.书面作业 Q1.将Student对象(属性:int id, String name,int age,doub ...
- 201521123057 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) ...