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. APP-BOM-20516 错误处理一例

    昨天在处理一个工单异常时,需要将一个Released的工单改为Unreleased状态,程序报APP-BOM-20516错误,如下图.百度只搜到两条记录,均无用.Google能搜到的多一些,也无用.进 ...

  2. iBatis.Net（C#）系列Demo源码

    iBatis.Net(C#)系列一:简介及运行环境源码  [下载] iBatis.Net(C#)系列二:SQL数据映射源码 [下载] iBatis.Net(C#)系列三:数据库查询源码  [下载]

  3. 几种在Linux下查询外网IP的办法

    原文地址:http://my.oschina.net/epstar/blog/513186 Curl 纯文本格式输出: curl icanhazip.com curl ifconfig.me curl ...

  4. [LeetCode] “全排列”问题系列(二) - 基于全排列本身的问题，例题: Next Permutation , Permutation Sequence

    一.开篇 既上一篇<交换法生成全排列及其应用> 后,这里讲的是基于全排列 (Permutation)本身的一些问题,包括:求下一个全排列(Next Permutation):求指定位置的全 ...

  5. Android应用如何支持屏幕多尺寸多分辨率问题

    作为Android应用程序开发者都知道android是一个“碎片化”的世界.多种系统版本.多种尺寸.多种分辨率.多种机型,还有不同的厂商定制的不同ROM,你开发的应用会在不可预期的手机上报错.这给开发 ...

  6. 如何对excel进行列查重

    学习了excel函数:countif.表达式:COUNTIF(数据区域,条件),作用:对数据区域内符合条件单元格计数 具体应用 在“姓名”(列A)后插入一列(列B),在B2单元格输入公式“=IF(CO ...

  7. vmware虚拟机工具vmware tools介绍及安装排错

    VMware Tools是VMware虚拟机中自带的一种增强工具,相当于VirtualBox中的增强功能(Sun VirtualBox Guest Additions),是VMware提供的增强虚拟显 ...

  8. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  9. Unity3D 敌人AI 和 动画( Animator )系统的实例讲解

    在这个实例中,我们要做一些敌人AI的简单实现,其中自动跟随和动画是重点,我们要达到的目标如下: 1.敌人能够自动跟随主角 2.敌人模型一共有四个动作:Idle(空闲) Run(奔跑) Attack(攻 ...

  10. 【初识 JQMobile 小小总结】

    作为一个前端新手,之前还没有接触过手机端的项目.两周前项目经理告诉我要做手机端,让我用JQMobile. 之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto.amaz ...