DOM(文档对象模型)基础加强

DOM(文档对象模型)基础加强

文档:标记型文档
对象:封装了属性和行为的实例,可以直接被调用。
模型:所有的标记型文档都具有一些共性特征的一个体现。
    用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性)都封装成对象。

   封装成对象的目的:是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。

标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档,DOM这种技术都可以对其进行操作。
常见的标记型文档包括:HTML、XML。

DOM要操作标记型文档必须先进行解析。

DOM结构模型图如下所示:

DOM的三个级别和DHTML介绍

DOM模型有三种:
    DOM level 1:将html文档封装成对象。
    DOM level 2:在level 1的基础上添加新的功能,例如:对于事件和css样式的支持。
    DOM level 3:支持xml1.0的一些新特性。
    
DHTML
    动态的HTML,它不是一门语言,是多项技术综合体的简称。
    包括html、css、dom、javascript。

这四种语言的职责:
    html:负责提供标签,封装数据,这样便于操作数据。
    css:负责提供样式,对标签中的数据进行样式定义。
    dom:负责将标签及其内容解析,封装成对象,对象中具有属性和行为。
    javascript:负责提供程序设计语言,对页面中的对象进行逻辑操作。

NODE接口的特性和方法

    
特性/方法             类型/返回类型         说明

nodeName             String              节点的名字;根据节点的类型而定义    元素节点返回元素名称,属性节点返回属性名称,文本节点返回内容为#text的字符串
nodeValue            String              节点的值;根据节点的类型而定义     元素节点返回null,属性节点返回属性的值,文本节点返回文本节点的内容
nodeType             Number              节点的类型常量值之一           元素节点返回1,属性节点返回2,文本节点返回3
  nodeName(只读)    
  nodeType(只读)    
  nodeValue(可读可写)

ownerDocument        Document            指向这个节点所属的文档

firstChild           Node                指向在childNodes列表中的第一个节点
lastChild            Node                指向在childNodes列表中的最后一个节点

childNodes           NodeList            所有子节点的列表
parentNode           Node                返回一个给定节点的父节点

previousSibling      Node                指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
nextSibling          Node                指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null

hasChildNodes()      Boolean             当childNodes包含一个或多个节点时,返回真

attributes           NamedNodeMap        包含了代表一个元素的特性的Attr属性对象;仅用于Element元素节点

appendChild(node)    Node                将node添加到childNodes的末尾
removeChild(node)    Node                从childNodes中删除node

replaceChild(newnode, oldnode)    Node   将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode)    Node   在childNodes中的refnode之前插入newnode

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象的集合
    all[]   提供对文档中所有 HTML 元素的访问,返回对文档中所有 HTML 元素的引用。
        语法
        document.all[i]
        document.all[name]
        document.all.tags[tagname]
        all[] 是一个多功能的类似数组的对象,它提供了对文档中所有 HTML 元素的访问。
        all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
        尽管如此,这个 all[] 数组在已有的代码中仍然使用。
    forms[]  返回对文档中所有 Form 对象引用。 
        语法
        document.forms[]
        
Document 对象的属性
    body   提供对 <body> 元素的直接访问,对于定义了框架集的文档,该属性引用最外层的 <frameset>。

Document 对象的常用方法
    getElementById("属性id的值")         返回对拥有指定 id 的第一个对象的引用 
    getElementsByName("属性name的值")    返回带有指定名称的对象集合 
    getElementsByTagName("标签名称")        返回带有指定标签名的对象集合 
    write()                          向文档写 HTML 表达式 或 JavaScript 代码 

示例代码如下:

 Element 对象

Element 对象的方法
    getAttitude("属性名称")                获取属性的值 
    setAttribute("属性名称", "属性的值")    设置属性
    removeAttribute("属性名称")            删除属性
    
在 Element 对象中查找 Element 对象
在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName("标签名称")方法。而该方法返回的是一个集合。

示例代码如下:

Node 常用属性

节点名称
nodeName:其内容是给定节点的名字。
    如果给定节点是一个元素节点,nodeName返回这个元素的名称(标签名)。
    如果给定节点是一个属性节点,nodeName返回这个属性的名称(属性名)。
    如果给定节点是一个文本节点,nodeName返回一个内容为 #text 的字符串。
    
节点类型    
nodeType:返回一个整数,这个数值代表着给定节点的类型。
    如果给定节点是一个元素节点,nodeType返回值是1。
    如果给定节点是一个属性节点,nodeType返回值是2。
    如果给定节点是一个文本节点,nodeType返回值是3。
    
节点的值    
nodeValue:返回给定节点的当前值(字符串)。
    如果给定节点是一个元素节点,nodeValue返回值是 null。
    如果给定节点是一个属性节点,nodeValue返回值是这个属性的值。
    如果给定节点是一个文本节点,nodeValue返回值是这个文本节点的内容。
示例代码: 

父节点、子节点和同辈节点

父节点:
    parentNode;            属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
        注意:document 节点的没有父节点。
    
子节点:
    childNodes;            获取指定节点的所有子节点集合。
    firstChild;            获取指定节点的第一个子节点。
    lastChild;             获取指定节点的最后一个子节点。

同辈节点:
    nextSibling;          返回一个给定节点的下一个兄弟节点。
    previousSibling;    返回一个给定节点的上一个兄弟节点。
    
IE6-8 Chrome                                IE9-10 Chrome & FireFox Chrome
    firstChild;        第一个节点          firstElementChild;         第一个节点
    lastChild;      最后一个节点          lastElementChild;          最后一个节点
    nextSibling;     下一同级节点          nextElementSibling;        下一同级节点
    previousSibling;  上一同级节点         previousElementSibling;    上一同级节点

节点属性

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点(特别是元素节点)的属性。

事实上,attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。

检测子节点和属性

查看是否存在子节点方法: hasChildNodes()
查看是否存在属性方法:hasAttributes()
即使节点中没有定义属性,其 attributes; 属性仍然有效的,而且长度值为0。同样节点中的 childNodes; 属性也是如此。

当你想知道某个节点是否包含子节点和属性时,可以使用 hasChildNodes() 和 hasAttributes() 方法。
但是,如果还想知道该节点中包含多少子节点和属性的话,仍要使用 attributes; 和 childNodes; 属性。
在IE浏览器中,不存在 hasAttributes() 方法!

操作 DOM 节点树

插入节点:
    appendChild()方法
    insertBefore(new, old)方法
    没有insertAfter()方法
示例代码:

innerHTML属性

浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。

innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。

innerHTML 属性多与div或span标签配合使用。

示例代码:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

多类型传值和冗余参数+递归调用

11870
来自专栏Golang语言社区

Golang语言之defer-再议

defer语句被用于预定对一个函数的调用。我们把这类被defer语句调用的函数称为延迟函数。注意,defer语句只能出现在函数或方法的内部。 一条defer语句...

355140
来自专栏柠檬先生

zepto 基础知识(2)

20.append   append(content) 类型:self   在每个匹配的元素末尾插入内容(内部插入)。内容可以为html 字符...

22460
来自专栏Petrichor的专栏

python: count函数

27420
来自专栏Golang语言社区

Go语言中怎样判断数据类型

要判断数据类型,可以用Go的空接口: 建一个函数t 设置参数i 的类型为空接口,空接口可以接受任何数据类型 func t(i interface{}) { ...

39250
来自专栏杨龙飞前端

es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

21670
来自专栏Golang语言社区

Go 语言指针作为函数参数

Go 语言允许向函数传递指针,志需要在函数定义的参数上设置为指针类型即可。 以下实例演示了如何向函数传递指针,并在函数调用后修改函数内的值,: package ...

35850
来自专栏前端知识分享

第149天:javascript中this的指向详解

js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看:

10120
来自专栏ppjun专栏

C++程序控制结构

case 后面没break 就会一直执行下去的,所以break是为了跳出switch。比如:

14100
来自专栏Python小屋

Python字符串split()和join()方法应用一例

Python字符串对象提供了大量的方法,其中split()用来以指定的字符串作为分隔符对字符串进行分隔并返回列表,join()方法使用指定的字符串作为连接符对序...

28530

扫码关注云+社区

领取腾讯云代金券