DOM DOM概述

DOM的官方定义
DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。

DOM的分类
核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
HTMLDOM：针对HTML文档，提供的专有的属性和方法。
XMLDOM：针对XML文档，提供的专有的属性和方法。
EventDOM：事件DOM，提供了很多的常用事件。
CSSDOM：提供了操作CSS的一个接口。

HTML节点树
DOM中节点的类型：
document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
element元素节点：元素节点对应于网页中的各标记。
attribute属性节点：每个元素都有若干个属性。
text文本节点：文本节点是最底层节点。

核心DOM公共属性和方法
nodeName：节点名称。
nodeValue：节点的值。
firstChild：第一个子节点。
lastChild：最后一个子节点。
parentNode：父节点。
childNodes：子节点列表，是一个数组。

节点访问
1.为什么，document.firstChild找到的不是HTML节点呢？
DOM是针对HTML4.01开发的。我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
2.为什么，node_body.firstChild找不到table节点？
在Firefox下，会把空格或换行，当成一个文本节点。因此，所有标记之间的空格和换行，都去掉。

查找html节点的方法
document.firstChild
document.documentElement(兼容性较好)

查找body节点的方法
document.firstChild.lastChild
document.body(推荐使用)

节点属性
1、getAttribute()——获取属性的值
举例：var src = imgObj.getAttribute("src")
2、setAttribute()——添加属性，设置属性
举例：imgObj.setAttribute("src" ,"images/02.jpg")
3、removeAttribute()——删除属性
举例：imgObj.removeAttribute("src")

节点操作
createElement()创建节点
语法：var nodeObj = document.createElement(tagName)
appendChild()追加节点
语法：parentNode.appendChild(childNode)

DOM DOM概述相关推荐

DOM | DOM树 + 获取元素 +事件基础 + 常见的鼠标事件
目录 DOM简介什么是DOM DOM树获取元素如何获取页面元素根据ID获取getElementById() 根据标签名获取getElementsByTagName() 通过 HTML5 新增的 ...
一些重要的 XML DOM 方法概述
DOM(Document Object Model 文档对象模型)定义了访问和操作文档的标准方法.在本章中我们将介绍一些其他重要的 XML DOM 方法. 获取元素的值下面的实例中使用的 XML 文 ...
JavaScript文档对象模型DOM节点概述（1）
【前端学习笔记DOM—DOM常见操作】
目录前言一.什么是DOM 二.常见的DOM操作 1.增 (1)新建 (2)插入 2.删 (1)删除子节点 (2)删除属性节点 3. 改 (1)替换节点 (2)修改属性值 4. 查 (1)通过id属 ...
DOM - DOM事件高级
1. 注册事件(绑定事件) 给元素添加事件,称为注册事件或绑定事件. 有两种方式:传统方式和方法监听注册方式 1.1 传统方式注册利用on开头的事件 onlick <button onclic ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）
API DOM DOM简介什么是DOM DOM树获取元素 getElementById获取元素得到一个元素对象object 用dir打印,还可以得到它的属性 div#time getElemen ...
初读JavaScript DOM编程艺术（一）
JavaScript DOM编程艺术--前三章概念总结一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组三. DOM ...
2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展
2019独角兽企业重金招聘Python工程师标准>>> 1.DOM基本概述 Document Object Model,文档对象模型,是W3C织制订的一套用于访问XML和HTML文档 ...

DOM DOM概述

DOM DOM概述相关推荐

最新文章

热门文章