js：DOM的概念、选择器、节点属性、属性操作、内容操作 - 第十天

最新推荐文章于 2024-08-11 00:22:53 发布
最新推荐文章于 2024-08-11 00:22:53 发布
阅读量879 收藏 1
点赞数 1
分类专栏： Javascript基础 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdcxy_lj/article/details/123641835
版权
本文主要介绍了JavaScript中的DOM概念，包括DOM的树状结构、节点类型和属性操作。DOM选择器包括元素节点选择器和其他节点选择器，用于选取需要操作的节点。通过节点的属性，如nodeType、nodeName和nodeValue，可以对不同类型的节点进行过滤和操作。此外，文章还详细讲解了HTML属性和JS属性的操作方法，以及内容操作，如innerHTML、innerText和outerHTML。最后，提到了DOM在实际应用中的练习，如选项卡效果，以及后续将涉及的样式和元素操作。
摘要由CSDN通过智能技术生成

# 一、复习

1、BOMwindow，窗口、顶层对象

2、全局方法：

    - alert

    - prompt

    - confirm

    - open

    - close

    - setInterval

    - setTimeout

    - clearInterval

    - clearTimeout

3、全局事件

    - load：页面和资源加载完成

    - srcoll滚动条时

        - docunment.docunmentElement.scrollTop

        - docunment.docunmentElement.scrollLeft

    - resize：改变浏览器视口大小

        - docunment.docunmentElement.clientWidth

        - docunment.docunmentElement.clientHeight

4、子对象

    - location：地址

    - history：历史记录

    - navigator：浏览器信息

    - frame页面结构

    - document：页面

5、计时器

    - 计时器

        - setInterval

        - clearInterval

    - 延时器

        - setTimeout

        - clearTimeout

6、禁止的转换

    - 十进制转其他（数值转字符）

        - str.toString（n）

    - 十进制转其他（数值转字符）

        - toString（）

编程能力：代码熟练度:代码逻辑

业务能力：揣摩用户心理活动：想要什么，字怎么实现（计时器内部的功能，要么启用要么禁用）


 

# 三、DOM

1、DOM：文档对象模型，document，提供了网页的各项操作

    - DOM对应的是html页面，DOM是树状结构

    - DOM结构中，每个组成部分都叫节点，每个节点都是对象（object）

    - 节点分类：

        - 元素节点

        - 文本节点

        - 注释节点

        - 属性节点

        - 根节点：document

    - DOM提供了网页操作：先选择需要操作的节点，

最低0.47元/天 解锁文章
qdcxy_lj
关注
专栏目录
DOM - 节点选择器和属性选择器
Jared864的博客
05-12 1434
Day21 一、DOM 介绍 概念：DOM（document of module）、 DOM不属于BOM window对象身上有提供document对象 DOM主要控制页面（html文件），所有的页面操作都需要通过DOM DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级） html根元素：head，body DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象 选择器 元素节点选择器（只有元素节点） 直接选择器 id选择器：document.getELe
自学js第十二天:DOM概念和基础操作
weixin_47592060的博客
05-07 1145
Web API 总结1： dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对应的node节点类型对象 , 又因为DOM下的 这些node所有对象都 实现implements 了 Node 接口，拥有一些共同的属性和方法,node节点实例对象其实都是来自Node接口。这是 DOM 操作的基础。 总结2： 有两种获取标签对象的写法: (静态生成 和 动态生成) <!D
JavaScript：DOM选择器
读心悦
10-23 1503
在通过id、name、class或者标签名来获取元素的时候，只能通过document来调用对应函数，在查找特定元素的时候可能不太方便，比如获取p元素的子元素。一、通过id定位元素，JavaScript提供了getElementById()函数来来查找对应的ID的元素的，返回的是匹配到ID的第一个元素。通过绑定不同的事件，就可以修改文档的结构、样式喝内容。，baseElement表示的是基准元素，常见的基准元素有document和element，selectors表示是一个标准的css选择器，
JavaScript 之 DOM 操作（一）
最新发布
m0_73759720的博客
08-11 2029
本文主要讲了获取标签的方法、设置标签的样式、设置文本、标签操作及事件的一些操作。
JS-DOM选择器
qq_40850291的博客
04-12 436
JS-DOM选择器 文章目录JS-DOM选择器DOM选择器一、问题：获取ul中的第一个li标签二、方法一:getElementByXXX三、方法二:querySelector API四、方法三：Chrome环境中的$符号简写方式五、总结1.性能上2.使用上 DOM选择器 一、问题：获取ul中的第一个li标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
DOM选择器
顺其自然~专栏
01-06 532
元素节点选择器包括id,class,name,tagname,高级,关系。 1.1 id选择器 id:返回的是单个对象 相关标签代码 <body> <div id="box">1</div> <div id="box">2</div> <div id="box">3</div> <div class="msg"> <div class="sbox
JavaScript之Dom选择器
c__dreamer的博客
02-19 482
Dom         Dom即Document Object Model （文档对象模型），Dom定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对html以及xml的表追编程接口。        JavaScript进入Dom阶段是JS通过一些方法来增删改查html文档。Dom选择器        Dom选...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
此外，`querySelector()`和`querySelectorAll()`是更强大的选择器，它们支持CSS选择器语法。`querySelector()`返回匹配的第一个元素，而`querySelectorAll()`返回匹配的所有元素的NodeList。这两个方法在处理复杂的...
DOM操作精华：节点获取与属性管理
- `querySelector()` 和 `querySelectorAll()`: 使用CSS选择器获取单个或多个元素，更灵活。 2. 属性操作： - `getAttribute()`: 获取节点的属性值。 - `setAttribute()`: 设置节点属性值，包括IE的特殊实现。 ...
第十周：DOM操作分配：简单的待办事项应用程序
02-14
JavaScript提供了多种方法，例如`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`，它们根据ID、CSS选择器或类名等属性选取元素。对于待办事项应用，我们可能需要获取特定...
JavaScript-dom选择器||节点
wust_cyl的博客
04-15 651
dom选择器。我们知道document表示文档，我们就是通过document里面的方法选择标签。1：document.getElementById();通过选择Id选择器，来选择标签。 &lt;div id="demo"&gt;123 &lt;/div&gt; &lt;div &gt; 456&lt;/div&gt; &lt;script type='...
JavaScript--DOM选择器
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 965
1.Dom选择器 什么是DOM 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 DOM树 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
HTML DOM节点选择器
JayYuen的博客
09-16 1262
一，id获得元素 <body> <div id="div"> id获得元素 </div> </body> <script> let dom = document.getElementById("div"); console.log(dom); </script> 二，标签名获...
js-DOM选择器
珂鸣玉的博客
03-01 350
目录 一、文本操作 1、 纯文本 2、带有标签效果的文本设置 3、案例 案例1、操作文本节点内容 案例2、点击按钮出来弹框 案例3、点击弹框修改文本内容和地址 二、属性操作 1、默认属性（自带属性） 2、自定义属性 3、案例 案例1、通过表单元素属性点击按钮后显示用户选择了几个 案例2、自定义下标属性 案例3、点击小图切换大图 三、样式操作 1、行内样式 2、计...
Dom常用选择器
weixin_44094720的博客
01-18 436
选择器 选择dom中的元素时，常用选择器： document.getElementById()；通过选择Id选择器，来选择标签。 document.getElementsByTagName()；通过标签名来选择标签。 document.getElementsByName()；通过name属性来选择标签。 document.getElementsByClassName()；通过Class选择器来选择标签。 document.querySelector()；可以像css一样，选择标签。eg:("#id")类似
Dom选择器，节点类型
m0_54581080的博客
06-21 117
方法 学Dom开始,一切系统给生成的成组的方式，基本上全是类数组 //document代表整个文档，html只是一个文档的根标签 document.getElementById通过Id选出来(除了这个，其他的选择器选择都是一组) document.getElementsByTagName通过标签来选择(兼容型强，最主流用法), 也可以选择name来调用 document.getElementsByclassName通过Class选择 这两个选出来的不是实时的，等于个镜像，...
36 DOM name属性选择器
wwwshengbo的博客
02-17 417
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; DOM name 属性选择器 getElementBy
JavaScript(二十一) DOM选择器
Bella.的博客
02-21 499
1. DOM基本操作 从dom开始，一切数组给生成关于组的方式都是类数组 除了Id剩下的都是选页面所有 1.1 getElementById() id一一对应的，没法找出来 一组，加个only取出来div 1.2 getElementsByTagName() 最主流方法 直接在括号里写div：意思是把页面里的所有div都拿出来，即使只有一个也成一个数组形式 后面加个0表示第一个div 1.3getElementsByName() 1.4getElement...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值