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. ionic button笔记

    源码文件:_button.scss 和 _button-bar.scss,以及_variables.scss(66行-163行). 按钮是手机app不可或缺的一部分,不同风格的app,需要的按钮多种多 ...

  2. 自定义组件之MoreListView

    前言 本文针对自定义组件进行一些分析.还是那句老话“授之于鱼不如授之以渔”.今天要讲的是一个自定义的可以分页的ListView. 网上都讲了些ListView分页的方法,那么为什么我在这里还需要自己写 ...

  3. lucene.net的一个动态更新类

    工作的需要,需要对于lucene.net索引即时的更新,毕竟lucene.net的索引重建的话比较慢,数据量大的时候建下要几天,所以就写个了缓冲类来解决即时的更新的问题,其实还是比较简单的. 大体上的 ...

  4. 树莓派 LED+蜂鸣+声音传感器+红外模块组合打造声控/红外控制LED

    昨天搞了控制LED,玩了第一个,剩下的就感觉很简单了,这里记录一下 先来几张照片 玩了蜂蜜模块才发现规律,一般这种模块,都会有三个针脚,VCC(3.3V或5V供电输出针脚).GNC(对应GPIO针脚的 ...

  5. SharePoint 2013 搜索爬网功能

    最近在政府部门介绍SharePoint 2013 新功能,我也准备了很多,比如SharePoint 2013的Search.以后有机会谈谈Office Web App,Workflow等. Share ...

  6. Mysql查询大表出现的一个错误

    第一次测试执行下面的语句时发生如下错误:bigdata里面有100万条数据 mysql> select count(*) from (select distinct(id) from bigda ...

  7. [Solution] ASP.NET Identity(1) 快速入门

    本节将介绍: ASP.NET Identity简介 快速入门 扩展 ASP.NET Identity简介 身份管理在ASP.NET中存在很长世间了,ASP.NET 开发团队已经学会了很多从客户的反馈. ...

  8. HTTPS 概述

    [[  From   https与http的区别   ]] 什么是HTTPS HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道 ...

  9. ok6410 android driver(4)

    Install busybox for goldfish/phone 1. Download busybox source code http://www.busybox.net/ 2. Decomp ...

  10. Silverlight开源项目与第三方控件收集

    http://easysl.codeplex.com/ http://compositewpf.codeplex.com/ http://silverlight.codeplex.com/releas ...