通过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 类,用于标记已经被高亮过的文本节点。
:star: 所有的标签:比如 body div,html是根节点 属性结点 所有的属性,比如 herf 文本结点 所有的文本 结点的查找 结点的关系:父节点,子节点,兄弟节点 父节点的查找 使用parentNode...属性,返回最近一级的父节点,找不到返回null 语法:子元素.parentNode 子结点的查找 childNodes - 获得所有的子节点,包括文本节点(空格、换行)、注释节点等 chilrden :...star: -获得所有元素节点,返回的还是一个伪数组 兄弟结点的查找 nextElementSibling 查找下一个兄弟结点 previousElementSibling 查找上一个兄弟节点 结点的增加...一般情况下,我们新增节点,按照如下操作 1创建一个新的节点 2把创建的新的节点放入到指定的元素内部 创建结点 documnet.createElement('标签名') 追加结点 //插入父元素的最后...根据DOM树和样式规则,生成渲染树(Render Tree) 进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小) 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
一、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
,返回一个: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元无门槛券
手把手带您无忧上云