querySelector 该方法返回满足条件的单个元素。...//返回id为container的首个div element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll...该方法返回所有满足条件的元素，结果是个nodeList集合。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll 该方法返回所有满足条件的元素，结果是个nodeList集合。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点
(DTD) document.documentElement 返回文档的根节点 document.domain 返回当前文档的域名 document.referrer 返回载入当前文档的文档的 URL...() 返回带有指定名称的对象集合 document.getElementsByTagName() 返回带有指定标签名的对象集合 document.importNode() 把一个节点从另一个文档复制到该文档以便应用...() 返回文档中匹配指定的CSS选择器的第一元素 document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的...documentURI、URL documentURI 属性和 URL 属性都返回当前文档的网址。...location location 属性返回一个只读对象，提供了当前文档的 URL 信息。
常用节点获取方法： 名称 描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点...获取元素节点信息常用属性： 名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...DOM 添加： 名称 描述 createElement(tagName) 创建一个由标签名称tagName指定的HTML元素 appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾处...url，如果没有则打开空白页 name: 指定target属性或窗口名称，支持以下值： _blank –- url加载到新窗口（默认） _parent –- url加载到父框架 _self...返回窗口的网页显示区域高度 url: 打开指定页面的url，如果没有则打开空白页 name: 指定target属性或窗口名称，支持以下值： _blank –- url加载到新窗口（默认
断点调试js 断点类型 使用目的 Line-of-code 在精确的某一行 Condition line-of-code 在某一行，但是只有特定情况下才触发 DOM 在特定DOM节点或者他的子节点改变时触发...XHR when an XHR URL contains a string pattern 事件监听 异常 当代码抛出异常时触发 函数 特定函数被调用时 source 面板 在source面板中可以编辑...$0-$4 0、1、2、3 和 $(selector) $(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。...$$(selector) $$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll()。...例如，要在控制台中显示使用 table 的名称列表，需要执行： var names = { 0: { firstName: "John", lastName: "Smith" },
由于挂下来的资源大部分都是视频类型，所以也不必下载下来。于是我配置了一个开了 autoindex 的 Nginx 服务器，在校园网内，直接通过一个内网的 URL 来实现资源的访问。 ?...观察发现，PotPlayer 可以批量添加 URL，所以说，我只要把所有的链接一起导出、添加就好了。...拿到数据源的列表 这里通过浏览器的 Selector API 将 DOM 中所有的链接元素提取出来，由于 document.querySelectorAll 方法返回的对象不是Array 数组类型，所以这里通过...== -1 ) 我们可以看到，经过这一段处理，返回一个过滤后只剩下 25 个元素的数组。 ? 3....将链接元素映射为链接字符串 这里的数组的元素全都是 DOM 中的链接元素节点，但我要的是字符串，所以这里需要通过映射(map)的方式把元素转为链接，链接在这里表现为 a 元素的 href 属性。
C1 能力认证——Web进阶 DOM节点操作-上 名称 描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 querySelector...名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合 firstElementChild...tagName指定的HTML元素 appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾处 insertAdjacentHTML(position, text) 将指定文本解析为...innerHeight 返回窗口的网页显示区域高度 location对象 location对象包含当前url信息，经常用于网址判断，url跳转 名称 描述 href 返回当前完整网址 host 返回主机名和端口号...url history.back() forward() 返回历史记录的下一个url history.back() go(n) 返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，
NodeList 对象是一个从文档中获取的节点列表 (集合) 。 NodeList 对象类似 HTMLCollection 对象。...所有浏览器的 childNodes 属性返回的是 NodeList 对象。 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。...; 实例解析 获取 元素的集合： var myNodelist = document.querySelectorAll("p"); 显示节点列表的元素个数： document.getElementById...实例 修改节点列表中所有 元素的背景颜色: var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i 节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
innerHeight 返回窗口的网页显示区域高度 open（） 格式：[url,name,features,replace] 参数 说明 url 打开指定页面的 url，如果没有则打开空白页 name...方法 说明 示例 back() 返回历史记录的上一个url history.back() forward() 返回历史记录的下一个url history.forward() go(n) 返回相对于当前记录的第...() 获取带有指定标签名的节点集合 getElementsByClassName() 获取带有指定类名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll...()示例 document.querySelectorAll('.item')[0] document.querySelectorAll('.item')[1] 通过属性获取节点方法（间接查找） 方法...HTML元素（标签） appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾 insertAdjacentHTML(position, text) 将指定文本解析为 HTML
posts = document.querySelectorAll('li:not(header li)'); // 获取文章列表，返回他们的文本内容（标题）列表并且输出。...// 从博客存档页面中选择博客文章列表 const posts = document.querySelectorAll('li:not(header li)'); // 获取每篇博客文章的标签列表，并且拍平后返回...// 从博客存档页面中选择博客文章列表 const posts = document.querySelectorAll('li:not(header li)'); // 获取所有文章的标签列表。...const tags = tagLists.map((x) => x.textContent); // 统计带有 ConardLi 标签的文章数。...这个函数执行的是带有副作用的操作，会改变原本的迭代器，它不返回任何值。
, 注意： 一定是访问过的历史url history是window对象的一部份，可以通过window.history属性进行访问 back() 加载history列表中的前一个URL forward()...加载history列表中的下一个URL go(数字) 加载hitory列表中的某一个具体的页面 的页面的标签对象 document.getElementById() 返回指定id对象的引用 document.getElementsByName() 返回指定带有名称的对象集合 document.getElementsTagName...() 返回指定带有标签名的对象集合 document.getElementsByClassName() 根据Class属性值获取元素对象们。...返回值是一个数组 document.querySelector(id选择器) 根据id选择器，获取元素 document.querySelectorAll(css选择器) 根据css选择器获取元素，返回是一个数组
元素节点.childNodes 返回元素的一个子节点的数组（包含空白文本Text节点）。 元素节点.children 返回元素的一个子元素的集合（不包含空白文本Text节点）。...元素节点.firstChild 返回元素的第一个子节点（包含空白文本Text节点）。 元素节点.firstElementChild 返回元素的第一个子元素（不包含空白文本Text节点）。...元素节点.lastChild 返回元素的最后一个子节点（包含空白文本Text节点）。 元素节点.lastElementChild 返回元素的最后一个子元素（不包含空白文本Text节点）。...元素节点.previousSibling 返回某个元素紧接之前的兄弟节点（包含空白文本Text节点）。...元素节点.nextSibling 返回某个元素紧接之后的兄弟节点（包含空白文本Text节点）。
document.embeds: Document接口的embeds只读属性返回当前文档中嵌入的元素的列表。...document.location: 返回一个Location对象，包含有文档的URL相关的信息，并提供了改变该URL和加载其他URL的方法。...document.URL: 返回当前文档的URL地址。...document.getElementsByName(name): 根据给定的name返回一个在(X)HTML document的节点列表集合。...document.getElementsByTagNameNS(namespace, name): 返回带有指定名称和命名空间的元素集合，整个文件结构都会被搜索，包括根节点。
")) { //true } 元素遍历 ---- Element Traversal API 为 DOM 元素添加了以下 5 个属性: childElementCount: 返回子元素(不包括文本节点和注释...getElementsByClassName() 方法 getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。...此外，这个新类型还定义如下方法: add(value): 将给定的字符串值添加到列表中，如果值已经存在，就不添加了 contains(value): 表示列表中是否存在给定的值，如果存在则返回 true...，否则返回 false remove(value): 从列表中删除给定的字符串 toggle(value): 如果列表中已经存在给定的值，删除它，如果列表中没有给定的值，添加它 //删除"disabled...innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记 outerHTML 属性返回调用它的元素及所有子节点的 HTML 标签 scrollIntoView
求多个数中的最小值 Math.sqrt() 对一个数进行开方 DOM 页面加载 window.onload = function () { } getElementById()：返回带有指定ID 的元素...var btnlist = btn.getElementById("bs"); getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。...button"); // 取出第1个Tag var btns = document.getElementsByTagName("button")[0]; getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表...var childrens = city.children; console.log(childrens.length) 推荐使用这种方式 firstChild获取当前元素的第一个子节点，会获取到空白的文本子节点...(parentNode) previousSibling：获取当前元素的前一个兄弟节点 能获取到空白的文本 var shanxi = document.getElementById("shanxi");
querySelectorAll() 这个方法和querySelector方法一样，只不过它是查询匹配所有的节点，不是一个，这个方法返回的是NodeList的实例。...let spans = document.querySelectorAll('span'); console.log(spans); 我这里没有写span标签，但是它返回的确实是一个NodeList...元素遍历小知识 ie9之前的版本不会把元素间的空格当成空白节点，而其他浏览器会，这样导致了childNodes和firstChild等属性上的差异。因此W3c定义了一组新属性。...Element Traversal API 为 DOM 元素添加了 5 个属性： childElementCount，返回子元素数量（不包含文本节点和注释）； firstElementChild，指向第一个...在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就不用担心空白文本节点的问题了。
注释是注释节点 Document 对象的一些常见的属性、方法： 属性： URL 返回当前文档的 URL。...domain 返回当前文档的域名。 title 返回当前文档的标题。 referrer 返回载入当前文档的 URL。 lastModified 返回文档当前被加载的日期和时间。...方法： getElementById() 查找拥有指定id的元素，并返回这个元素的对象引用 getElementsByName() 返回带有指定name属性值的元素对象集合。...getElementsByTagName() 返回带有指定标签名的对象集合。 write() 向文档写 HTML 表达式 或 JavaScript 代码。...关于writeln()方法，这个方法虽然说可以换行，但是它换行的方式是加一个\n并不是加一个，在浏览器中只会把\n解析成空白符，空白符就会解析成空格，所以使用仅仅使用writeln()方法是没有换行效果的
通过DOM接口，可以改变网页的内容，结构和样式 DOM树 ---- 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中所有的标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点...使用 getElementById获取带有ID的元素对象 Document的方法 getElementById()返回一个匹配特定 ID的元素....： ---- 根据标签名获取 使用 document.getElementsByTagName可以返回带有制定标签名的对象的集合 实例： 猫狗鼠鱼 猫狗鼠鱼...： 返回的是获取过来元素对象的集合，以伪数组的形式存储的 也就是说我们可以通过提取数组元素的方法得到其中一个元素的内容。...： ---- document.querySelectorAll() 返回指定选择器的所有元素对象集合 实例： var allNav = document.querySelectorAll('nav'
前言 我们平常说的查找元素 和 节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？...NodeList 对象代表一个有顺序的节点列表 以下方法获取的为element 元素对象 document.getElementById(“id属性”) document.querySelector(‘...HTMLCollection 无法使用数组的方法：valueOf(), pop(), push(), 或 join() NodeList节点列表不是一个数组！...NodeList节点列表看起来可能是一个数组，但其实不是。 你可以像数组一样，使用索引来获取元素。...节点列表无法使用数组的方法：valueOf(), pop(), push(), 或 join() 。 2022年第 11 期《python接口web自动化+测试开发》课程，6月5号开学!
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素 document.body #获取body...document.lastModified #文档被最后修改的日期和时间 document.referrer #载入当前文档的文档的URL document.title #...当前文档的标题 document.URL #当前文档的URL document.doctype #当前文档的doctype document.baseURI...a.classList 获取当前元素的class列表 a.accessKey='w' 设置或返回元素的快捷键 a.namespaceURI 返回指定节点的命名空间的 URI a.dir...a.item(num) 返回节点列表中位于指定下标的节点 a.length 返回节点列表中的节点数 12)).获取元素文本 a.innerHTML 获取或者设置对象内的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
