Javascript DOM的简介,节点和获取元素详解

目录
  • DOM
  • 节点
  • 元素节点：
  • 文本节点：
  • 属性节点：
  • 获取元素
    • getElementById（）
    • getElementsByTagName()
    • getElementsByClassName()
  • 总结：

DOM

文档：DOM中的“D”，当创建一个网页并把它加载到Web浏览器中时，它把编写的网页文档转换为一个文档对象。

对象：DOM中的“O”,对象是一种自给自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个特定对象去调用的函数被称为这个对象的方法

模型：DOM中的“M”，它是某种事物的表现形式。DOM把一份文档表示为一颗家谱树。

节点

节点:文档是由节点构成，节点是文档树上的树枝和树叶。

DOM中有许多不同类型的节点，如元素节点，文本节点和属性节点。

元素节点：

标签的名字就是元素的名字。文本段落元素的名字是“p” ，无序清单元素的名字是“u1”，列表项元素的名字是“1i”。

元素可以包含其他的元素。在我们的“购物清单”文档里，所有的列表项元素都包含在-一个无序清单元素的内部。事实上，没有被包含在其他元素里的唯一元素是元素， 它是我们的节点树的根元素。

文本节点：

元素节点只是节点类型的种。如果一份文档完全由一 些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在内容为王的互联网上，绝大多数内容都是由文本提供的。如<p>元素包含着的文本是一 个文本节点(text node)。
在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。

属性节点：

属性节点用来对元素做出更具体的描述。如几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述，属性节点总是包含在元素节点中。

获取元素

有三种DOM方法可以获取元素节点，分别通过元素ID，标签名字和类名字来获取。

getElementById（）

DOM提供了一个名为getElementById的方法，这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象，他说document对象特有的函数，函数名的后面必须跟有一对圆括号，这个圆括号包含着函数的参数。getElementById方法只有一个参数，你想获取的那个元素的id属性的值必须放在单引号或双引号里document. getElementById（id）。文档中的每一个元素都是一个对象。DOM提供的方法能得到任何一个对象。例如：

document. getElementById（“purchases”）`

getElementsByTagName()

getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。这个方法也只有一个参数，它的参数是标签的名字：element.getElementsByTagName(tag) 。
但它返回的是一个数组，它与getElementById方法有许多相似之处，如：

document. getElementsByTagName("li");

getElementsByClassName()

这个方法可以可以通过Class属性中的类名来访问元素。getElementsByClassName只接受一个参数，就是类名：

getElementsByClassName(class)

这个方法的返回值与getElementsByTagName()类似，都是一个具有相同类名的元素的数组。如：

document.getElementsByClassName("sale");

使用这个方法还可以查找带有多个类名的元素，只要在字符串参数中使用空格分隔类名即可。

总结：

1、一份文档就是一颗节点数。

2、节点分为不同类型：元素节点、属性节点、和文本节点等。

3、getElementById将返回一个对象，该对象对应着文档里的一个特定的元素。

4、getElementsByTagName和getElementsByClassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。

5、每个节点都是一个对象。

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • 了解javascript中的Dom操作

    DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意点: 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用"结点"称呼它 3.结点的关系有:父子关系.兄弟关系 1.获取元素结点 1)直接获取 ① document.getElementById() ② document.ge

  • JavaScript DOM常用操作代码汇总

    JavaScript DOM常用操作代码汇总

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,

  • js DOM的事件常见操作实例详解

    js DOM的事件常见操作实例详解

    本文实例讲述了js DOM的事件常见操作.分享给大家供大家参考,具体如下: 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.

  • 一文秒懂JavaScript DOM操作基础

    一文秒懂JavaScript DOM操作基础

    DOM概念 DOM:document object model : 文档对象模型 通过js去操作HTML的代码,添加元素,删除元素... 获取元素 (1)getElementById 通过id获取,获取到的是一个元素 (2)getElementsByTagName 通过标签名获取,获取到的是一个元素集合(数组) (3)getElementsByClassName 通过class获取,获取到的是一个元素集合(数组) (4)getElementsByName 通过name属性获取,获取到的是一个元素

  • JavaScript变量Dom对象的所有属性

    DOM对象的HTML: <button>Disable State</buttom> 1,遍历DOM对象所具有的属性(全部,不管是否在HTML tag中是否设置) <!DOCTYPE html> <html> <body> <button id="btnToggleState" onclick="toggleStateManagement()"> Disable State </butto

  • Javascript DOM的简介,节点和获取元素详解

    目录 DOM 节点 元素节点: 文本节点: 属性节点: 获取元素 getElementById() getElementsByTagName() getElementsByClassName() 总结: DOM 文档:DOM中的"D",当创建一个网页并把它加载到Web浏览器中时,它把编写的网页文档转换为一个文档对象. 对象:DOM中的"O",对象是一种自给自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个特定对象去调用的函数被称为这个对象的

  • JavaScript实现六种网页图片轮播效果详解

    JavaScript实现六种网页图片轮播效果详解

    目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放

  • 使用纯JavaScript封装一个消息提示条功能示例详解

    目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • Java IO流之原理分类与节点流文件操作详解

    Java IO流之原理分类与节点流文件操作详解

    目录 IO流简介 IO流原理 流的分类 IO 流体系 节点流和处理流 节点流操作 IO流简介 I/O是Input/Output的缩写, I/O技术是非常实用的技术,用于处理设备之间的数据传输.如读/写文件,网络通讯等. Java程序中,对于数据的输入/输出操作以"流(stream)" 的方式进行. java.io包下提供了各种"流"类和接口,用以获取不同种类的数据,并通过标准的方法输入或输出数据. IO流原理 输入input:读取外部数据(磁盘.光盘等存储设备的数据

  • JavaScript中匿名函数的用法及优缺点详解

    匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

  • JavaScript展开运算符和剩余运算符的区别详解

    目录 什么是剩余运算符? 剩余运算符在JavaScript函数中是如何工作的? 注意!不能在包含剩余参数的函数体中使用"use strict" 剩余运算符在参数解构中是如何工作的? JavaScript arguments和剩余参数之间有哪些区别? 什么是展开运算符以及它在JavaScript中是如何工作的? 有关展开运算符我们需要知道的 1. 展开运算符不能展开对象字面量的值 2. 展开运算符不克隆相同的属性 3. 注意展开运算符在包含非原语的对象中是何如工作的 如果myName数组

  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    目录 何为递归 构成递归条件 关于回溯 实际业务 组合问题 何为递归 递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环 构成递归条件 子问题须与原始问题为同样的事,且更为简单

  • JavaScript判断两个值相等的方法详解

    JavaScript判断两个值相等的方法详解

    目录 前言 非严格相等 严格相等 同值零 同值 总结 前言 在 JavaScript 中如何判断两个值相等,这个问题看起来非常简单,但并非如此,在 JavaScript 中存在 4 种不同的相等逻辑,如果你不知道他们的区别,或者认为判断相等非常简单,那么本文非常适合你阅读. ECMAScript 是 JavaScript 的语言规范,在ECMAScript 规范中存在四种相等算法,如下图所示: 上图中四种算法对应的中文名字如下,大部分前端应该熟悉严格相等和非严格相等,但对于同值零和同值却不熟悉,

  • JavaScript面试数组index和对象key问题详解

    JavaScript面试数组index和对象key问题详解

    目录 面试题一: 1.数组赋值 2.数组取值 面试题二: 1.对象赋值 2.对象取值 总结 面试题一: var arr = [1, 2, 3, 4] 复制代码 问:arr[1] = ?; arr['1'] = ? 答:arr[1] = 2; arr['1'] = 2 这里可以再分为两个问题: 1.数组赋值 var arr = [1, 2, 3, 4] arr[1] = 10; // 数字场景 arr['10'] = 1; // 字符串场景 arr['a'] = 1; // 字符串场景 arr[t

随机推荐