DOM（Document Object Model），即文档对象模型。DOM是针对HTML和XML文档的一个API，它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。在定义方面，我理解得尚不是非常透彻。但DOM树是前端工程师在学习javascript过程中非常重要的一部分，所以今天且把一些我最近常用到的内容总结一下吧。

　　1、元素节点方法

　　　　通过ID获取元素节点：document.getElementById();

　　　　通过标签名获取元素节点：document.getElementByTagName();

　　　　通过名字获取获取元素节点：document.getElementByName();　　　

　　　　获取节点属性：getAttribute(属性名);　　　　

　　　　设置节点属性：setAttribute(属性名,属性值);

　　　　删除节点属性：removeAttribute(属性名);

　　2、节点属性

　

　　注意：

　　1、在使用childnodes获取子节点时，换行符（不可见）也会当作一个子节点，且nodeType等于3；

　　2、当获取body的childnodes时，若</body>闭标签后面插入了<script></script>标签，浏览器(包括FF、IE和chrome等)在渲染DOM树的时候，会把<script>节点渲染成<body>的子节点。

　　注意，当在<head></head>标签内插入<script></script>时则不会导致这种情况。为了搞清楚这个问题，我找来了DOM树的结构图。我的理解是，因为DOM树的根部结构都是固定为DOCUMENT->HTML->HEAD和BODY的，而浏览器在渲染时为了遵循这种规则，就统一把body后面的script解析到body内部。也就是说浏览器将script渲染成body的子节点，不然若把script直接渲染成html的子节点的话，就会破坏DOM树的标准结构。也就是说，浏览器之所以这样做是为了规范以及标准，因为script标签原则上是放在head或body内部的。所以不推荐大家把javascript代码置在body之后，这是一种不规范的做法。

　　　　

　　3、节点关系

　　　　childNodes：所有子节点（包含换行符和空格）

　　　　children：所有是标签类型的子节点（直接子节点，不包括孙子等）

　　　　parentNode：父节点

　　　　nextSibling：下一个兄弟节点（记得去换行符和空格）

　　　　previousSibling：上一个兄弟节点

　　　　firstChild : 第一个子节点

　　　　lastChild：最后一个子节点

　　注意：使用后四个关系（即next、previous、first和last）获取节点时，在IE下会存在写法上的差异，所以我们在使用时常常要写兼容性方法。

　　//兼容IE的方法

 function fnNext(obj){   //下一个兄弟节点

     return obj.nextElementSibling ? obj.nextElementSibling : obj.nextSibling;

 }

 function fnpre( obj ){    //上一个兄弟节点

     return obj.previousElementSibling ? obj.previousElementSibling : obj.previousSibling;

 }

 function fnFirst(obj){      //第一个子节点

     return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;

 }

 function fnLast(obj){       //最后一个子节点

     return obj.lastElementChild ? obj.lastElementChild : obj.lastChild;

 }

　　4、获取元素尺寸和位置

　　　　获取内联样式的宽高：Element.style.width/height  (只能获取写在标签style内的样式)

　　　　获取可视区域大小：clientWidth/clientHeight (包括padding，但不包括margin和border)

　　　　获取元素实际大小：offsetWidth/offsetHeight (包括border、内填充和滚动条，但不包括margin)

　　　　获取定位父节点：offsetParent （相对定位的父容器，定位不一定根据父节点）

　　　　获取相对位置：offsetLeft/Top/Right/Bottom（相对于父定位容器的位置）

　　注意：在offsetParent 中，如果本身父元素是<body>，非IE 返回body 对象，IE 返回html 对象。（IE总是那么我行我素，￣□￣｜｜）

　　5、获取应用样式

　　　　比较少用，以下两个我都没有用过，这里仅作为拓展认识。

　　　　currentStyle：ie所支持的获取非行间样式的方法

　　　　用法：对象.currentStyle.样式名

　　　　例：oDiv.currentStyle.width

　　　　getComputedStyle：非ie所支持的获取非行间样式的方法

　　　　用法：getComputedStyle(对象，伪类).样式名

　　　　例：getComputedStyle(oDiv,null).color

　　6、操作节点方法

　　　　createElement("标签名") : 创建新元素；

　　　　createTextNode("") : 创建文本节点；

　　　　　　创建方法：document.createElement('div');

　　　　appendChild(node) : 向childNodes末尾插入一个节点node

　　　　insertBefore(node,targetNode) : 向targetNode之前插入节点node

　　　　replaceChild(newNode,oldNode) : newNode替换节点oldNode

　　　　removeChild(node) : 移除父节点的某个子节点

　PS：下一篇会写到DOM应用的实例，灵活使用DOM的节点操作方法，是一个很强大的功能。

学习总结——DOM的更多相关文章

  1. html学习笔记-DOM

    html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...

  2. 原生js学习 选择dom

    连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...

  3. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  4. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  5. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  6. Vue.js_础学习之DOM操作

    demo说明: 1.{{message}}                           --“Mustache” 语法(双大括号) 2.v-bind:属性名                   ...

  7. 轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  8. 学习WEBAPI(DOM)第二天

    目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...

  9. Javascript学习，DOM对象，方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

随机推荐

  1. 理解RxJava:(三)RxJava的优点

    理解RxJava:(三)RxJava的优点 在第一部分,讲解了RxJava的基本结构.在第二部分,展示了operators的强大之处.但是你们可能仍然没有被说服,也没有足够的理由信服.下面是一些能让你 ...

  2. 使用Doxygen生成net帮助文档

    一． 什么是Doxygen? Doxygen 是一个程序的文件产生工具,可将程序中的特定批注转换成为说明文件.通常我们在写程序时,或多或少都会写上批注,但是对于其它人而言,要直接探索程序里的批注,与打 ...

  3. datagrid 动态列

    var options={}; $(function(){ var myNj = 9; //初始化 $("#disgrid").datagrid({ type: 'POST', n ...

  4. 【转载】S2SH

    说说最多人用的SSH或SSI吧,现在用的比较多的应该就是struts2.x+spring3.X+hibernate4.X或hibernate3.X了吧,mybatis用的人也有,方便有DBA的公司. ...

  5. Java Web学习系列——创建基于Maven的Web项目

    创建Maven Web项目 在MyEclipse for Spring中新建Maven项目 选择项目类型,在Artifact Id中选择maven-archetype-webapp 输入Group I ...

  6. ListView不规律刷新多次，重复执行getView

    写ListView的时候,有时会发现ListView中的getView执行多次,有的时候又不是,搞了半天才找到原因,在http://blog.csdn.net/danielinbiti/article ...

  7. [Math] A love of late toward Mathematics - how to learn it?

    Link: https://www.zhihu.com/question/19556658/answer/26950430     王小龙 ,数学,计算机视觉,图形图像处理 数学系博士怒答! 我想大家 ...

  8. spring源码分析之spring-web remoting模块概况及基本概念

    spring-web总体分为三部分:caucho.httpinvoker.jaxws,其总体构造图如下: uml结构: 先看看网上搜索到的上述实现的原理吧:Spring RMI,Hessian/Bur ...

  9. Hadoop第7周练习—MapReduce进行数据查询和实现推简单荐系统

    1.1 1.2 :计算员工相关 2.1 内容 :求各个部门的总工资 :求各个部门的人数和平均工资 :求每个部门最早进入公司的员工姓名 :求各个城市的员工的总工资 :列出工资比上司高的员工姓名及其工资 ...

  10. Deep Learning 在中文分词和词性标注任务中的应用

    开源软件包 SENNA 和 word2vec 中都用到了词向量(distributed word representation),当时我就在想,对于我们的中文,是不是也类似地有字向量(distribu ...