资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript 之 DOM [ Document对象 ]

JavaScript 之 DOM [ Document对象 ]

xorpay / 2820人阅读

摘要：描述表示文档对象模型是独立于任何语言的是用于操作页面的内容文本图像等等结构元素标签和样式属性引入文件可以在页面添加代码方式分为内嵌样式可以在元素中使用元素闭合元素在里面书写代码内嵌样式存在的问题由于将元素写在页面元素上面时，浏览器会先执行代

DOM 描述

DOM表示文档对象模型

DOM是独立于任何语言的

DOM是用于操作HTML页面的内容(文本、图像、等等...)、结构（元素标签）和样式（CSS属性）

引入JavaScript文件

可以在html页面添加JavaScript代码

方式分为：

内嵌样式：可以在 元素 中使用 getElementsByName()方法

以查找 name属性 的方式来定位指定元素的位置

会得到全部带有 name属性 的元素，以类数组表示得到的元素（ NodeList类型 ）



获取有ID属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
getElementsByClassName()方法

以查找 class属性值 的方式来定位指定元素的位置

会得到全部带有 class属性 的元素，以类数组表示得到的元素（ HTMLCollection类型 ）



获取有ID属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
getElementsByTagName()方法

以查找 元素名 的方式来定位指定元素的位置

会得到全部 被指定的元素，以类数组表示得到的元素（ HTMLCollection类型 ）



获取有ID属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
querySelector()方法

以查找 对应的CSS选择器 的方式来定位指定元素的位置

会得到 第一个对应该CSS选择器 的元素 - 只有一个



获取有ID属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
querySelectorAll()方法

以查找 对应的CSS选择器 的方式来定位指定元素的位置

会得到 对应该CSS选择器 的全部元素，以类数组表示得到的元素（ NodeList类型 ）



获取有ID属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Name属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
Document对象创建页面节点

可以使用Document对象提供的属性或方法来在html页面中创建新节点

createElement()方法

createTextNode()方法

createAttribute()方法

createElement()方法

用于创建新的元素节点
createTextNode()方法

用于创建新的文本节点
createAttribute()方法

用于创建属性节点

注意：该方法只能接收一个参数，做为属性节点的属性名，属性值使用 nodeValue 创建
类数组对象

在使用JavaScript代码对html页面中的元素进行定位置并显示元素数据内容时，会将数据内容集合到一个相似数组的 “类数组对象”

类数组分为

HTMLCollection类型

动态集合

是一个元素的集合（html的标签）

会根据HTML元素变化而变化

NodeList类型

静态集合

是一个节点的集合（节点指元素节点、属性节点及文本节点）

不会根据HTML元素变化而变化



获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素


获取有Class属性的元素
云服务器 GPU云服务器 javascript的dom对象 javascript document 删除dom对象 dom对象操作

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

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

相关文章

  • 【EASYDOM系列教程】之DOM 简介

    摘要：最后表示，就是中表示各个对象之间的关系。的定义由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。浏览器的支持目前几乎所有的浏览器都支持的内容。而组织定义的标准规范，主要也是为了解决在不同浏览器的差异问题。 DOM 是什么 DOM 被设计用于解析 HTML 页面文档，方便 JavaScript 语言通过 DOM 访问和操作 HTML 页面中的内容。 DOM 是由 W3C...

    Me_Kun 评论0 收藏0

  • 【JavaScript】DOM之Document对象

    摘要：一对象对象是什么对象是的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法通过。 JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法通过conslie。log()方法来Document对象打印，测试该对象的属性和方法 /* ...

    SoapEye 评论0 收藏0

  • 【JavaScript】DOM之Document对象

    摘要：一对象对象是什么对象是的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法通过。 JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法通过conslie。log()方法来Document对象打印，测试该对象的属性和方法 /* ...

    dreamans 评论0 收藏0

  • JavaScript系列之事件详解

    摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门 事件 JavaScript与HTML之间的交互是通过事件实现的...

    pakolagij 评论0 收藏0

  • 《JavaScript 闯关记》之事件

    摘要：事件捕获团队提出的另一种事件流叫做事件捕获。所有节点中都包含这两个方法，并且它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。 JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web 浏览器...

    ConardLi 评论0 收藏0

发表评论

登陆后可评论

0条评论

xorpay

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<