资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/DOM(一)

DOM(一)

imccl / 1111人阅读

摘要：在浏览器中，对象是继承自类型的一个实例，表示整个页面。级只为规定了一个方法，即。，元素在文档中的唯一标识符。，有关元素的附加说明信息，一般通过工具提示条显示出来。第一类特性就是，用于通过为元素指定样式。

DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描,绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分

节点层次

DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类
型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另
外也与其他节点存在某种关系

节点的公共属和方法 childNodes

获取子节点

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
parentNode

获取父节点

firstNode

获取第一个子节点

lastNode

获取最后一个子节点

nextSibling

获取下一个兄弟节点

previousSibling

获取上一个兄弟节点

ownerDocument

获取文档节点

hasChildNodes()

判断是否有子节点

appendChild()

添加子节点,接收一个参数表示要添加的节点,返回添加的节点.

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true
insertBefore()

在参考节点前添加子节点,接收两个参数,第一个参数表示要添加的节点,第二个参数表示参考节点,返回添加的节点.

//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
replaceChild()

替换子节点,接收两个参数,第一个参数表示要添加的节点,第二个参数表示被替换的节点,返回被替换的节点.

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
removeChild()

移除子节点,这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()

克隆节点,接收一个boolean类型的参数,当参数为true时执行深复制,意即复制内容包含其子节点.

    

  • item 1
    • 

  • item 2
    • 

  • item 3
    • 

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

deepList.childNodes.length 中的差异主要是因为IE8 及更早版本与其他浏览器处理空白字符的方式不一样。IE9 之前的版本不会为空白符创建节点。
cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性，例如事件处
理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切
都不会复制。IE 在此存在一个bug，即它会复制事件处理程序，所以我们建议在复制
之前最好先移除事件处理程序。

Doucment类型

JavaScript 通过Document 类型表示文档。在浏览器中，document 对象是HTMLDocument（继承
自Document 类型）的一个实例，表示整个HTML 页面。而且，document 对象是window 对象的一个
属性，因此可以将其作为全局对象来访问

document对象的属性和方法 documentElement

获取html节点元素

var html = document.documentElement; //取得对的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
body

获取body节点元素

title

获取title文字节点元素

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";
URL

取得完整的URL

domain

取得域名

referrer

取得来源页面的URL

//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.referrer;
getElementById()

通过id属性获取元素

getElementsByTagName()

通过元素名获取元素

var div = document.getElementById("myDiv"); //取得id="myDiv"元素的引用
var images = document.getElementsByTagName("img"); //取得img元素的引用
var allElements = document.getElementsByTagName("*"); //获取文档中所有的元素
IE7及较低版本还为此方法添加了一个有意思的“怪癖”：name特性与给定ID匹配的表单元素也会被该方法返回
document.anchors

包含文档中所有带name 特性的元素

document.forms

包含文档中所有的

元素，与document.getElementsByTagName("form")得到的结果相同

document.images

包含文档中所有的元素，与document.getElementsByTagName("img")得到的结果相同；

document.links

包含文档中所有带href 特性的元素。

DOM一致性检测

由于 DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要
了。document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对DOM的实现
直接对应。DOM1 级只为document.implementation 规定了一个方法，即hasFeature()。这个方
法接受两个参数：要检测的DOM功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该
方法返回true

var hasXmlDom = document.implementation.hasFeature("XML", "1.0");

以下为列出了可以检测的不同的值及版本号

Core 1.0、2.0、3.0 基本的DOM，用于描述表现文档的节点树

XML 1.0、2.0、3.0 Core的XML扩展，添加了对CDATA、处理指令及实体的支持

HTML 1.0、2.0 XML的HTML扩展，添加了对HTML特有元素及实体的支持

Views 2.0 基于某些样式完成文档的格式化

StyleSheets 2.0 将样式表关联到文档

CSS 2.0 对层叠样式表1级的支持

CSS2 2.0 对层叠样式表2级的支持

Events 2.0，3.0 常规的DOM事件

UIEvents 2.0，3.0 用户界面事件

MouseEvents 2.0，3.0 由鼠标引发的事件（click、mouseover等）

MutationEvents 2.0，3.0 DOM树变化时引发的事件

HTMLEvents 2.0 HTML4.01事件

Range 2.0 用于操作DOM树中某个范围的对象和方法

Traversal 2.0 遍历DOM树的方法

LS 3.0 文件与DOM树之间的同步加载和保存

LS-Async 3.0 文件与DOM树之间的异步加载和保存

Validation 3.0 在确保有效的前提下修改DOM树的方法

Element类型 HTML元素

所有 HTML 元素都由HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表
示。HTMLElement 类型直接继承自Element 并添加了一些属性。添加的这些属性分别对应于每个HTML
元素中都存在的下列标准特性。

id，元素在文档中的唯一标识符。

title，有关元素的附加说明信息，一般通过工具提示条显示出来。

lang，元素内容的语言代码，很少使用。

dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。

className，与元素的class 特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class 是ECMAScript 的保留字

var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
特性操作

有三个方法可以操作元素的特性,getAttribute() setAttribute() removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");

div.removeAttribute("class");

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不
相同。第一类特性就是style，用于通过CSS 为元素指定样式。在通过getAttribute()访问时，返
回的style 特性值中包含的是CSS 文本，而通过属性来访问它则会返回一个对象。
第二类与众不同的特性是onclick 这样的事件处理程序。当在元素上使用时，onclick 特性中包
含的是JavaScript 代码，如果通过getAttribute()访问，则会返回相应代码的字符串.
IE6 及以前版本不支持removeAttribute()。

attributes 属性

Element类型是使用attributes属性的唯一一个DOM节点类型,attributes属性是NamedNodeMap类型的对象,它有以下几个方法

getNamedItem(name)：返回nodeName 属性等于name 的节点；

removeNamedItem(name)：从列表中移除nodeName 属性等于name 的节点；

setNamedItem(node)：向列表中添加节点，以节点的nodeName 属性为索引；

item(pos)：返回位于数字pos 位置处的节点。

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";

由于attributes的方法不够方便，因此开发人员更多的会使用getAttribute()、removeAttribute()和setAttribute()方法。

创建元素

使用 document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。

var div = document.createElement("div");
div.id = "myDiv";
div.className = "box";

document.appendChild(div);

在 IE 中可以以另一种方式使用createElement()，即为这个方法传入完整的元素标签，也可以包含属性，如下面的例子所示。

var div = document.createElement("
");

这种方式有助于避开在IE7 及更早版本中动态创建元素的某些问题。下面是已知的一些这类问题。

不能设置动态创建的"); //创建input 元素 var input = document.createElement(""); //创建button 元素 var button = document.createElement(""); //创建单选按钮 var radio1 = document.createElement(""); var radio2 = document.createElement(""); } Text类型

文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML代码。

使用下列方法可以操作节点中的文本

appendData(text)：将text 添加到节点的末尾。

deleteData(offset, count)：从offset 指定的位置开始删除count 个字符。

insertData(offset, text)：在offset 指定的位置插入text。

replaceData(offset, count, text)：用text 替换从offset 指定的位置开始到offset+count为止处的文本

splitText(offset)：从offset 指定的位置将当前文本节点分成两个文本节点

substringData(offset, count)：提取从offset 指定的位置开始到offset+count 为止处的字符串

创建文本节点

通过createTextNode()可以创建文本节点.

var textNode = document.createTextNode("Hello world!");

下面展示如何将一个文本节点添加到文档中

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
合并文本节点

一个元素可能会存在多个文本节点,但是文本节点之间也没有空格,因此无法区分哪个节点对应的是哪个文本,通过下面的方法可以将element元素的文本节点合并.

element.normalize();

当然也可以分割文本节点,使用splitText(index),index表示字符索引.

var newNode = element.firstChild.splitText(5);从位置5 开始。位置5是"Hello"和"world!"之间的空格
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2
私有云 专线服务 DOM dom0和dom2 python dom XML DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86136.html

相关文章

  • 虚拟Dom详解 - (一)

    摘要：为此也做了一些学习简单的侃一侃虚拟到底是什么虚拟详解二什么是虚拟虚拟首次产生是框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继之后也在其核心引入了虚拟的概念。所谓的虚拟到底是什么也就是通过语言来描述一段代码。 随着Vue和React的风声水起，伴随着诸多框架的成长，虚拟DOM渐渐成了我们经常议论和讨论的话题。什么是虚拟DOM，虚拟DOM是如何渲染的，那么Vue的虚拟Dom...

    ashe 评论0 收藏0

  • 虚拟DOM

    摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。 虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    yanwei 评论0 收藏0

  • 虚拟DOM

    摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。 虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    alin 评论0 收藏0

  • 你不知道的Virtual DOM（一）：Virtual Dom介绍

    摘要：不同的框架对这三个属性的命名会有点差别，但表达的意思是一致的。它们分别是标签名属性和子元素对象。我们先来看下页面的更新一般会经过几个阶段。元素有可能是数组的形式，需要将数组解构一层。 欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的两大前端框架，React和Vue，都不约...

    lavor 评论0 收藏0

  • DOM 事件深入浅出（一）

    摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。 在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

    macg0406 评论0 收藏0

  • JavaScript 简介

    摘要：简介原文链接简称是一种轻量级，解释型的编程语言，其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构，以便简化对文档的任意部分的访问和操作。 JavaScript 简介 原文链接 JavaScript ( 简称：JS ) 是一种 轻量级，解释型 的编程语言，其函数是一等公民。众所周知，它是用于网页开发的脚...

    URLOS 评论0 收藏0

发表评论

登陆后可评论

0条评论

imccl

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<