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. asp.net中使用ueditor

    原文地址:http://blog.uoolo.com/Article/16 还有在MVC中使用ueditor:http://blog.uoolo.com/Article/111 最初百度了一下“编辑器 ...

  2. SQLite 入门教程 （终端）命令

    一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...

  3. [转]c#截取指定长度的字符串

    /// <summary> /// 截取指定長度的字符串 /// </summary> /// <param name="s"></par ...

  4. [持续更新]UnsatisfiedLinkError常见问题及解决方案

    想必很多开发者和我们一样,遇到过许多UnsatisfiedLinkError的困难,着实令人头疼,现在总结一下,希望能帮助更多的人. 常见错误 lib库不同目录下的SO文件参差不齐. lib库目录下的 ...

  5. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...

  6. 使用自带的JavaScriptSerializer序列化实体 指定的属性如何不序列化

    public class GridConfig { public string width = "100%"; public string source = "dataA ...

  7. thread_LockSupport

    LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...

  8. thread_fork/join并发框架2

    转自  http://blog.csdn.net/mr_zhuqiang/article/details/48300229 三.使用异步方式 invokeAll(task1,task2); 是同步方式 ...

  9. AutoMapper配置方法

    在Mvc开发中,我们经常需要构建一个viewModel出来供页面使用,在PO和VO之间相互传值的时候,如果实体字段比较多的时候,那么传值将变得异常麻烦,也使得代码非常的臃肿.AutoMapper可以帮 ...

  10. 极简Unity调用Android方法

    简介 之前写了篇unity和Android交互的教程,由于代码里面有些公司的代码,导致很多网友看不懂,并且确实有点小复杂,这里弄一个极简的版本 步骤 废话不多说,直接来步骤吧 1.创建工程,弄大概像这 ...