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. AndroidTouchGalleryLibrary 优化

    AndroidTouchGalleryLibrary 是一个非常好用的库, 但是使用的时候,需要小心处理,容易引发OutOfMemoryError,同时使用UrlTouchImageView的时候, ...

  2. cocos在win平台exe无法使用 UserDefault 解决方法

    exe模拟器用来调度cocos本来是很方便的事情,但最近很多win10策划无法调用UserDefault.一直以为是权限问题,今天有空读一下码才发现.原来是cocos的bug.存在本地的UserDef ...

  3. 未知高度定宽div水平居中及垂直居中（兼容ie6及其他牛逼浏览器）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. tcp/ip协议listen函数中backlog参数的含义与php-fpm的502 Bad Gateway

    To understand the backlog argument, we must realize that for a given listening socket, the kernel ma ...

  5. messages.exe病毒的清理

    一.问题提出 20161021,10点05分,发现messages.exe突然出现在进程中,计算机突然重启,msconfig启动目录里多了一项c:\windows\system32\Drivers\m ...

  6. Centos用yum升级mysql到(5.5.37)

    原文:http://www.if-not-true-then-false.com/2010/install-mysql-on-fedora-centos-red-hat-rhel/ 1. Change ...

  7. （转）在低版本的SDK里使用高版本函数@SuppressLint("NewApi") or @TargetApi?

    @SuppressLint 和 @TargetApi达到的效果是一样的,相对于SuppressLint ,TargetApi会根据函数里使用的API,严格匹配SDK版本,给出编译错误,但是Suppre ...

  8. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  9. CentOS 6.4 编译安装LLVM3.3，Clang和Libc++

    LLVM的最新版本3.3终于在6月17日发布了,按之前的计划6月5日就应该发布了,不过毕竟没有太晚,赶在VS2013 preview(6月26日微软Build大会)之前出来了.加上之前gcc4.8.1 ...

  10. Django项目--web聊天室

    需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...