美文网首页程序员
javascript之DOM

javascript之DOM

作者: 一个迷失的孩子 | 来源:发表于2019-03-26 14:55 被阅读0次

DOM文档对象模型

DOM文档对象模型是基于HTML树的api,这里可以把HTML结构看成是一颗树形结构,使用DOM可以操作树中的节点,即操作(增删改查)HTML标签。

上图是一个简单的DOM树形结构图,可以使用document对象获取DOM,这个对象是window对象下的,在使用时,可以省略window。

可以把一个HTML标签看做是一个对象,标签中的属性对应的就是对象中的属性,DOM提供了访问他们的方法。

getElementById

    getElementById根据html标签的id来获取标签对象

getElementsByName

    getElementsByName根据html标签的name来获取一个数组对象,在html标签中name值是可以重复的,所以该方法会返回一个数组对象

getElementsByTagName

    getElementsByTagName根据标签的名字来获取数组对象

hasChildNodes

    hasChildNodes判断当前html标签对象下是否包含子节点。

nodeName、nodeType和nodeValue

    在文档中每个节点都有这三个属性:

    nodeName,获取节点名字

            如果节点是元素节点,nodeName返回这个元素的名称

            如果是属性节点,nodeName返回这个属性的名称

            如果是文本节点,返回一个内容为#text的字符串

    nodeType,返回一个整数,数值表示节点的类型,常用的有下面三个:

            元素节点,返回1

            属性节点,返回2

            文本节点,返回3

    nodeValue,获取节点的当前值

            元素节点,null

            属性节点,当前属性的值

            文本节点,返回文本内容

replaceNode

        replaceNode替换节点

getAttribute

        getAttribute获取标签中的属性,除了使用对象名.属性名的方式来获取属性之外还可以使用getAttribute()方法来获取指定的属性值

setAttribute

        setAttribute给对象添加属性

createElement

        createElement可以创建一个标签,createTextNode向标签中添加文本

insertBefore

        insertBefore在指定位置之前插入标签。

removeChild

        removeChild删除指定元素。

innerHTML

        大部分浏览器中都支持innerHTML,但是他不是DOM标准的组成部分。可以使用innerHTML获取对象的内容。

相关文章

  • DOM(一):Node属性与方法

    DOM之Node属性与方法思维导图 JavaScript-DOM之Node方法 Node.nodeType No...

  • Vue之虚拟DOM

    Vue之虚拟DOM 为什么要用到虚拟DOM? 众所周知,DOM操作是JavaScript语言的硬伤。浏览器对DOM...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • JavaScript入门学习书籍到阶段书籍

    入门:《深入浅出JavaScript》《JavaScript DOM编程艺术》 《JavaScript DOM高级...

  • JavaScript之DOM

    什么是DOM? DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档;O(对象)可以理解为类似 ...

  • javascript之DOM

    DOM文档对象模型 DOM文档对象模型是基于HTML树的api,这里可以把HTML结构看成是一颗树形结构,使用DO...

  • JavaScript 闯关记

    《JavaScript 闯关记》之 DOM(下) Element 类型 除了 Document 类型之外,Elem...

  • JavaScript HTML DOM

    JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有...

  • 专辑篇:JS HTML DOM

    JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...

  • DOM 增删改查举例

    一 什么是DOM DOM是HTML与JavaScript相互作用的接口,DOM不属于JavaScript,它是浏览...

网友评论

    本文标题:javascript之DOM

    本文链接:https://www.haomeiwen.com/subject/weigvqtx.html