通过DOM接口，可以改变网页的内容，结构和样式 DOM树 ---- 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中所有的标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点...（标签，属性，文本，注释等），DOM中使用node表示 DOM把以上内容都看作对象 ---- 获取元素 如何获取页面元素 根据ID获取 根据标签名获取 用过H5新增的方法获取 特殊元素获取 根据ID获取...使用 getElementById获取带有ID的元素对象 Document的方法 getElementById()返回一个匹配特定 ID的元素....由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。...如果当前文档中拥有特定ID的元素不存在则返回null. id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
查找元素 常见方法 getElementById: 通过ID精确查找一个元素。 getElementsByClassName: 根据类名查找多个元素。...性能考量：getElementsByClassName和getElementsByTagName返回的是实时的NodeList集合，频繁操作可能影响性能，考虑使用querySelectorAll获取静态集合...创建新节点 方法介绍 document.createElement: 创建一个新的HTML元素。 document.createTextNode: 创建文本节点。...直接赋值与appendChild混淆：对于已存在子节点的元素，直接使用element.innerHTML赋值会覆盖原有子节点，应根据需求选择合适方法。...修改现有节点 常见操作 innerText/innerHTML: 改变元素内的文本或HTML结构。
ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。...DOM 节点 节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。...【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。 【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。...了解其他方式 getElementById（document.getElementById 专门获取元素类型节点，根据标签的 id 属性查找） getElementsByTagName（根据标签获取一类元素...，例如 getElementsByTagName('div') 获取页面中所有的 div） document.getElementsByClassName ( 'w ')(根据类名获取元素获取页面所有类名为
HTML5学堂：JS获取节点的方法很多，但真正常用的或许就是通过id和标签获取节点，用传统的几种方法想要快速的查找到某个标签，就意味着需要更多的id，命名多了自然就烦了，接下来给大家介绍的方法就能简化很多操作...(querySelector和querySelectorAll)及其用法 querySelector和querySelectorAll的基本用法 平常我们在查找节点时总是一个个".getElementById...没错，今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。...和getElementsByTagName的区别，querySelectorAll查找节点会连同当前所在节点一起查找，也就是说在筛选"div div"这种结构的时候，并不是只在id为"my-id"的内部去查找...，而是包括id为"my-id"的节点及其内部节点。
前言 我们平常说的查找元素 和 节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？...节点与元素 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点...Hello元素有属性和文本，所以class="text-info" 和 id="demo"是属性节点，Hello是文本节点。...DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。 HTMLCollection 是表示 HTML 元素的集合。...文本节点、元素节点、属性节点、注释节点 HTMLCollection 不是一个数组！
() 重命名元素或者属性节点 … … 使用 由于属性和方法比较多，就把一些常用的一些属性和方法展开说明。...implementation 属性的 hasFeature 方法，可以判断当前环境是否部署了特定版本的特定接口。...anchors，embeds，forms，images，links，scripts，styleSheets 这几个属性都是返回文档内部特定元素的集合。...('DIV:not(.ignore)'); // 同时选中div，a，script三类元素 document.querySelectorAll('DIV, A, SCRIPT'); 如果 querySelectorAll...createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容 // 新建一个div节点和一个文本节点，文本节点插入div节点 var newDiv = document.createElement
浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点， 再由这些节点组成一个树状结构(DOM Tree)。 所有的节点和最终的树状结构，都有规范的对外接口。...常用dom操作： 查找页面的标签元素 标签增加、修改、删除等操作 标签的属性相关操作 给标签元素绑定事件（设置当什么什么时候，做什么什么事情） 1.3 查找节点 上一节我们知道，整个文档的节点就是document...节点，那么想要具体找到某个节点， 我们可以使用document提供的一系列方法： 1111111111 2222222222 <p class...('.p'); p[1].style.background = 'yellow'; 多个参数值，使用,（英文逗号）隔开，而querySelector()返回第一个选中的节点； var p = document.querySelectorAll...:first-line和:first-letter） 和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
("warning"); // 查找以log命名并且含有error和fatal类的元素的所有后代 var log = document.getElementById("log"); var fatal...document.all[] 已经废弃，不在使用，所以不学习 文档结构和遍历 一旦从文档中选取了一个元素，将会需要查找文档与之在结构上相关的部分，（即，父元素，子元素，兄弟元素）。...nextSibling，previousSibling 该节点的兄弟节点中的前一个和下一个 nodeType 该节点的类型 一些类 继承（基类，父类，超类），派生类，子类 这里以c++为栗子 ：基类，...派生类包含基类的所有成员，还包括自身的特有成员，由于继承关系的存在，派生类和派生类对象访问基类中的成员就像访问自己的成员一样。可以直接使用，但是派生类，仍旧无法访问基类中的私有成员。...它被当做一个轻量版的 Document 使用 nodeValue text节点或者Comment节点文本内容 nodeName 元素的标签名，以大写输出 一个栗子 <!
) // 输出返回值 // console.log( ele ) // 根据选择器获取一组 var eles = document.querySelectorAll(...当前点击的按钮和索引对应的盒子添加 active 类名 item.className = 'active' tabs[index].className = 'active...内部本身的 p 标签 var p = document.querySelector('p') // 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面 div.insertBefore...(span, p) 删除节点 我是 div 内部本身的 p 标签 我是 div 内部本身的 span 标签 </...var span = document.querySelector('span') // 使用创建的 i 标签去替换 div 内本身的 span 标签 div.replaceChild(
在这种情况下，你可以使用 createTreeWalker 方法来遍历文档树中的所有文本节点，并计算出每个文本节点的起始和结束位置。...对于每个文本节点，我们使用 exec 方法来查找匹配指定文本的子串，并将每个匹配的子串用黄色高亮显示。...---点评：有点东西，我其实是不知道为什么算不准 start 和 end 的位置，但 GPT 自己也能发现问题，并且给出了另一个解决方案，并且非常贴心解析了这段代码根据 GPT 的提示，是空字符的文本节点导致的问题...在遍历过程中，我们使用与之前相同的方式来查找需要高亮的节点，并将它们添加到 nodesToHighlight 数组中。...CSS 类，用于标记已经被高亮过的文本节点。
在这种情况下，你可以使用 createTreeWalker 方法来遍历文档树中的所有文本节点，并计算出每个文本节点的起始和结束位置。...对于每个文本节点，我们使用 exec 方法来查找匹配指定文本的子串，并将每个匹配的子串用黄色高亮显示。...---- 点评：有点东西，我其实是不知道为什么算不准 start 和 end 的位置，但 GPT 自己也能发现问题，并且给出了另一个解决方案，并且非常贴心解析了这段代码 根据 GPT 的提示，是空字符的文本节点导致的问题...在遍历过程中，我们使用与之前相同的方式来查找需要高亮的节点，并将它们添加到 nodesToHighlight 数组中。...CSS 类，用于标记已经被高亮过的文本节点。
一、DOM：全称Document Object Model(文档对象模型)1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构2、XML 是一种标记语言类似html...，被设计用来传输和存储数据3、DOM可以把网页和脚本语言以及其他编程语言联系起来4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）二、获取元素的五种方式1、根据ID获取返回元素对象（仅获取到匹配的第一个元素的标签..."> var boxDom = document.getElementById('box') console.log(boxDom);图片2、根据类名获取返回元素的对象集合...操作可以改变网页内容、结构和样式，通过利用Dom操作元素来改变元素里面的内容、属性等注意：事件和操作元素都是对标签进行操作的2、改变获取元素的内容（1）修改获取文本内容标题<button...document.createElement("标签名")3、添加节点添加的位置.appendChild(添加的节点)4、删除节点选择.removeChild(节点)5、复制节点/克隆节点cloneNode
:star: 所有的标签：比如 body div，html是根节点 属性结点 所有的属性，比如 herf 文本结点 所有的文本 结点的查找 结点的关系：父节点，子节点，兄弟节点 父节点的查找 使用parentNode...属性，返回最近一级的父节点，找不到返回null 语法：子元素.parentNode 子结点的查找 childNodes - 获得所有的子节点，包括文本节点（空格、换行）、注释节点等 chilrden :...star: -获得所有元素节点，返回的还是一个伪数组 兄弟结点的查找 nextElementSibling 查找下一个兄弟结点 previousElementSibling 查找上一个兄弟节点 结点的增加...一般情况下，我们新增节点，按照如下操作 1创建一个新的节点 2把创建的新的节点放入到指定的元素内部 创建结点 documnet.createElement('标签名') 追加结点 //插入父元素的最后...根据DOM树和样式规则，生成渲染树(Render Tree) 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小） 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
，返回一个：document.querySelector() 根据选择器或标签获取所有元素，返回多个：document.querySelectorAll() <div id="wrap...创建一个新<em>的</em>元素：document.createElement() 创建一个新<em>的</em><em>文本</em><em>节点</em>：document.createTextNode() 在一个已存在<em>的</em>元素<em>的</em>尾部添加元素：appendChild...所有<em>节点</em>都有的属性： nodeName，元素<em>节点</em><em>的</em> nodeName 是标签名称（大写），属性<em>节点</em><em>的</em> nodeName 是属性名称，<em>文本</em><em>节点</em><em>的</em> nodeName 永远是 #text，文档<em>节点</em><em>的</em> nodeName...永远是 #document nodeType，元素<em>节点</em>返回1，属性<em>节点</em>返回2，元素或属性中<em>的</em><em>文本</em>内容返回3 nodeValue，对于<em>文本</em><em>节点</em>，nodeValue 属性包含<em>文本</em>。...对于属性<em>节点</em>，nodeValue 属性包含属性值。文档<em>节点</em><em>和</em>元素<em>节点</em>，nodeValue 属性<em>的</em>值始终为 null。
Web APIs - 第4天 进一步学习 DOM 相关知识，实现可交互的网页特效 能够插入、删除和替换元素节点 能够依据元素节点关系查找节点 日期对象 掌握 Date 日期对象的使用，动态获取当前计算机的时间...ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。 实例化 // 1....(Date.now()) 获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date() DOM 节点 掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点...回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。...查找节点 DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
查找HTML元素 document.getElementsByTagName() #通过标签名查找HTML元素 document.getElementsByClassName() #通过类名查找...HTML元素 document.querySelector(".h") #第一个类名为 "h" 的元素 document.querySelectorAll("div.no, div#h"...document.doctype #当前文档的doctype document.baseURI #当前文档的绝对URI document.documentMode #浏览器使用的模式...childNodes #获取子节点的集合 ，返回数组 ，并把换行和空格也当成是节点信息。...，一般和下方的增加节点配套使用。
上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 DOM 或文档对象模型是 web 页面上所有对象的根。...document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。...它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。...position是相对于元素的位置，并且必须是以下字符串之一： beforebegin：元素自身的前面。 afterbegin：插入元素内部的第一个子节点之前。...beforeend：插入元素内部的最后一个子节点之后。 afterend：元素自身的后面。 text是要被解析为HTML或XML,并插入到DOM树中的字符串。 <!
, 参数 1, 参数 2…) setInterval(代码字符串或函数, 运行间隔毫秒数，参数 1, 参数 2…) 弹框 DOM DOM结构及节点 常用节点获取方法和属性 获取节点的方法（直接查找） 通过属性获取节点方法...文本节点、属性节点 节点之间的层级关系：父（parent）、子（child）和同胞（sibling）等术语用 于描述这些关系。...()示例 document.querySelectorAll('.item')[0] document.querySelectorAll('.item')[1] 通过属性获取节点方法（间接查找） 方法...说明 innerHTML 返回元素内包含的所有 HTML 内容（文本和标签），类型为字符串 innerText 和innerHTML类似，但是只返回文本 children 返回指定元素的子元素节点集合...'afterbegin‘ 插入元素内部的第一个子节点之前 'beforeend' 插入元素内部的最后一个子节点之后 'afterend' 元素自身的后面 示例 <!
DOM 的本质是一个对象 掌握查找节点的基本方法 掌握节点属性和文本的操作 能够使用间歇函数创建定时任务 介绍 知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能...DOM 节点 节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。... 查找元素类型节点 从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。...('li') // 获取第一个p元素 总结： document.getElementById 专门获取元素类型节点，根据标签的 id 属性查找...,需要保留之前的类名 通过 classList 操作类控制CSS 为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名 <!
元素：页面中所有标签都是元素，DOM中使用element表示。 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。...获取页面中的元素可以使用以下几种方式： 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 根据ID获取 使用 getElementById()方法可以获取带有ID的元素对象。...，更好的查看里面的属性和方法 get获得 element元素 by通过 驼峰命名法 参数id是大小写敏感的字符串所以要加单引号 返回的是一个元素对象 根据标签名获取 使用 getElementByTagName...document.querySelectorAll('.类名'); document.querySelectorAll('#ID名'); document.querySelectorAll('标签名'...childNode获得的是所有类型的子节点，包含元素节点、文本节点等，如果想要获得里面的元素节点，则需要专门处理，所以我们不提倡使用childNodes。
领取专属 10元无门槛券
手把手带您无忧上云
