是什么？

　　是各大浏览器提供的针对HTML和XML文档的一个API（Application Programming Interface应用程序编程接口）。DOM描述了一个层次化的节点树，容许开发人员对DOM中的节点进行增删改查，操作节点的属性和样式。

节点

　　HTML中的每个成分都是一个节点（元素，属性，文本，注释，文档）。下图是犀牛书中对DOM结构的解析，迷茫了回头看图。

节点类型

　　通过节点的nodeType属性访问该节点的类型，五种不同的返回值分别代表5中类型的节点。

　　元素（element）: 1

　　属性（attribute）：2

　　文本（text）：3

　　注释（annotation）：8

　　文档（document）：9（一个页面只有一个document对象）

<!-- 这是注释节点

      元素节点：整个div

      属性节点：有两个，id属性hero 和自定义属性 data-imgSrc="xxx"

      文本节点：哈哈没想到吧，我又回来啦！

-->

<div id="hero" data-imgSrc="xxx">哈哈没想到吧，我又回来啦！</div>

节点名称

　　通过nodeName访问节点名称。

　　元素节点：是大写的标签名称。

　　文本节点：永远是#text

　　注释节点：永远是#comment

节点值

　　通过nodeValue访问节点值，元素节点nodeValue属性不可用。

　　文本节点：其中的文本

　　注释节点：其中的注释内容

获取DOM元素

　　必须拿到相应的DOM元素，才能对它进行操作。文本，注释这两个节点不能够直接选取，需要获得包含他们的元素节点之后，通过元素节点的属性获取。通过操作之前我们还有一件事情需要搞清楚，DOMAPI在js中是以怎样的形式存在的。

　　js根对象：Object是js中的根对象，几乎所有对象都拓展于它。

　　window：window对象是浏览器环境提供的，拓展于Object的。window是浏览器环境中的全局对象。从程序度来看，每个页面都是一个独立的Window对象。

　　document：是Window上的属性，代表当前页面中的整个文档对象。DOM API 就放在document中。

console.log(document === window.document); //true

console.log(document);

　　chrome中以上两条语句的输出

　　

　　通过ID获取：document.getElementById()

　　通过className获取：document.getElementsByClassName()

　　通过标签名称获取：document.getElementsByTagName()

　　通过name（例如表单元素的name）属性值获取：document.getElementsByName()

　　可接收类名，id名，标签名获取匹配到的第一个元素（文档中从上到下，从外到里）：document.querySelector( 新)

　　可接收类名，id名，标签名获取匹配到的所有元素：document.querySelectorAll(新)

节点遍历

　　节点上有一些属性方便我们获取它的后代，附近的节点。考虑到我们日常工作中可能不需要操作注释节点，所以这些属性获取的结果被分为两类：查找过程忽略注释的，不忽略注释的。

　　childNodes：所有子节点       获取所有子节点（包括注释）

　　children：所有是标签类型的子节点    获取所有子元素

　　parentNode：获取已知节点的父节点

　　firstElementChild : 第一个子节点 （元素）

　　firstChild : 第一个子节点

　　lastElementChild：最后一个子节点（元素）

　　lastChild：最后一个子节点

　　nextElementSibling：下一个兄弟节点（元素）

　　nextSibling：下一个兄弟节点

　　previousElementSibling：上一个兄弟节点

　　previousSibling：上一个兄弟节点//

创建节点

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

　　document.createTextNode("") : 创建文本节点

插入节点

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

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

替换节点

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

删除节点

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

　　remove()：移除当前节点

复制节点

　　cloneNode(boolean) : 复制一个节点

DOM属性和样式操作

　　DOM从程序角度看是不同类型的节点，这里的DOM特指的是元素类型（Element），这里的属性特指的是标签元素上的属性（id class 自定义 style...）。

　　属性操作：getAttribute(属性名)、setAttribute(属性名,值)

var hero = document.getElementById("hero");

var heroAttr = hero.getAttribute("id");

console.log(heroAttr); // hero

hero.setAttribute("class","anmate fadeIn");

console.log(hero); // <div id="hero" data-imgsrc="xxx" class="anmate fadeIn">哈哈没想到吧，我又回来啦！</div>

　　样式操作

　　　　设置内联样式：dom.style.styleName = "value"

var hero = document.getElementById("hero");

hero.style.color = "red";

console.log(hero); //<div id="hero" data-imgsrc="xxx" style="color: red;">哈哈没想到吧，我又回来啦！</div>

　　　　获取经过层叠计算后，最终应用到元素上的样式：ie(dom.currentStyle.styleName) / 非ie(getComputedStyle(对象，伪类).样式名)

function getCurrentStyle(dom,styleName){
　　if(window.getComputedStyle){
　　　　return window.getComputedStyle(dom).styleName;
　　}
　　return dom.currentStyle.styleName;
}

DOM元素大小和位置

　　offsetWidth     元素自身的宽度   width+border+padding

　　offsetHeight    元素自身的高度   height+border+padding

　　clientWidth      获取元素的宽度  width+padding(不包含border）

　　clientHeight     获取元素的高度  height+padding(不包含border)

　　offsetLeft     元素左边框距离父元素的距离（如果父级没有定位，就是相对于浏览器窗口。如果有定位，是对有定位的父级元素）

　　offsetTop      元素上边框距离父元素的距离

客户区域

　　document.documentElement.clientWidth

　　document.documentElement.clientHeight

　　document.body.clientWidth

　　document.body.clientHeight

滚动属性

　　注意：chrome下滚动条相关操作是放在 document.body之下的。

　　scrollHeight, scrollWidth ：scrollHeight返回的是元素的实际内容的高度，值=子元素的height值+元素的padding-top+父元素padding-bottom。

　　scrollTop, scrollLeft： 返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。

// IE 6以上都可以

document.documentElement.scrollTop

// chrome

document.body.scrollTop

document常用属性

　　document.body：body元素

　　document.title：获取、设置文档的标题

　　document.URL：获得当前页面完整的URL

　　document.domain：获取当前页域名

........

DOM核心API的更多相关文章

  1. Meteor核心API

    在本教程中,我们将介绍学习Meteor核心API. 如果你想限制代码只在服务器或客户端可以使用下面的代码运行 - meteorApp.js if (Meteor.isClient) { // Code ...

  2. Java核心API需要掌握的程度

    分类: java技术2009-08-29 01:03 213人阅读 评论(0) 收藏 举报 javaapiswingxmlio Java的核心API是非常庞大的,这给开发者来说带来了很大的方便,经常人 ...

  3. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  4. DOM--3 DOM核心和DOM2 HTML(3)

    核心Element对象 操作Element对象的属性 为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法: getAttribut ...

  5. DOM--3 DOM核心和DOM2 HTML(1)

    网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...

  6. 支持GPS的核心API

    Android为GPS功能支持专门提供了一个LocationManager类,它的作用于TelephonyManager.AudioManager等服务类的作用相似,所有GPS定位相关的服务.对象都将 ...

  7. JS操作DOM常用API总结

    <JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...

  8. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. hibernate系列笔记(2)---Hibernate的核心API

    Hibernate的核心API 一般我们通过hibernate进行操作的时候,都会遵循下面的流程,那么接下来我对每一个步骤进行讲解: 1 public void testInsert() { 2 // ...

随机推荐

  1. IDA调试android so的.init_array数组

    参考: http://www.itdadao.com/articles/c15a190757p0.html 一. 为什么要调试init_array init_array的用途 1. 一些全局变量的初始 ...

  2. ActiveMQ持久化机制

    用户注册成功后发短信提醒 同步http 异步mq JMS中两种通讯模式: 发布订阅   一对多  topic   去过消费者集群的话 都会消费 消息队列   点对点 queue  去过消费者集群的话 ...

  3. 分享知识-快乐自己：什么是MVC

    1.什么是mvc: Model View Controller,是模型-视图-控制器的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个组件里,在改进和个性 ...

  4. python学习笔记：第六天（流程控制语句）

    Python3 条件控制 1.if 语句 <1> 一般形式 Python中if语句的一般形式如下所示: if condition_1: statement_block_1 elif con ...

  5. MySQL存储过程示例

    MySQL存储过程: /*自定义结束符*/ DELIMITER $$ /*如果存在同名的存储过程就删除*/ DROP PROCEDURE IF EXISTS prAddBlack$$ /*创建存储过程 ...

  6. mvn使用记录

    1. mvn dependency:copy-dependencies 会导出到targed/dependency 下面 2. mvn dependency:copy-dependencies -Do ...

  7. ACM学习历程——HDU5202 Rikka with string（dfs，回文字符串）

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  8. ubuntu svn 常用命令

    1.svn svn update 更新 新增文件或文件夹并提交svn add "sss" test.py testw.pysvn add "dir" dir_p ...

  9. bzoj 5281 [Usaco2018 Open]Talent Show——0/1分数规划

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5281 把分子乘1000,就能在整数里做了. 这种水题也花了这么久…… #include< ...

  10. c# Linq Where 抛出异常 导致 程序崩溃

    Collection was modified; enumeration operation may not execute" 这次项目中遇到一个问题, 就是C#程序随机崩溃, 抛出上面的异 ...