首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何遍历DOM

在本教程中,我们回顾一些HTML术语,这对使用 JSDOM非常重要,我们会介绍一下DOM树,节点,以及如何识别最常见的节点类型。最后,创建一个 JS 程序来交互式地修改DOM。...a 是标签 href 是属性 index.html 是属性值 Home 是文本 开头和结尾标记之间的所有内容组合在一起构成了整个HTML元素。 <!...DOM 树和节点 DOM中的所有元素都被定义为节点。节点的类型有很多种,但我们最常用的主要有三种: 元素节点 文本节点 注释节点 当HTML元素是DOM中的一个项时,它被称为元素节点。...除了这三种节点类型之外,document 本身也是一个document 节点,它是所有其他节点的根。 DOM由嵌套节点的树结构组成,通常称为DOM树。...回到index.html文件,添加一个带有id的button元素,并新建 script.js 引入其中。 JS 中的事件是用户所做的动作。

8.9K30
您找到你想要的搜索结果了吗?
是的
没有找到

DOM 元素的循环遍历

节点树的几个属性 childElementCount:返回子元素(不包括文本节点和注释)的数量 parentNode:ele 的父节点 childNodes:ele 的所有的直接子节点 nextSibling...:ele 的下一个同辈节点 previousSibling:ele 的上一个同辈节点 因为 childNodes 包含看不见的空格文本,还有注释等内容,所以使用起来不是太方便 因此,js 又重新引入了元素树的概念...遍历直接子级元素 假设 html 如下,要遍历出 div 中的所有直接子级的元素节点: hello world <em...遍历所有节点 深度优先遍历:当同时有兄弟节点和子节点的时候,总是优先遍历子节点 function getChildren(parent) { // 如果当前节点是元素节点,输出当前元素 parent.nodeType...=== 1 && console.log(parent); // 获得父节点的所有直接子节点 let children = parent.childNodes // 遍历 children

6K60

JSDOM

DOM:document object model。文档对象模型。它主要由许多节点。而基于JS对象的一切视角,DOM核心是节点对象和操作方法的属性。从下面三方面来介绍DOM。...见导图: 二、DOM之CSS样式 对于这部分的内容,涉及到的也是CSS样式的获取和操作。...JS中提供了专门儿用于获取元素尺寸和大小的方法。 实际大小:针对于元素的实际大小。主要与四个因素有关,padding。margin,border,scroll。而以下提供的几种方法,针对于不同的因素。...会有不同的结果,仅依据需求使用就可以 周边大小: 小结:DOMJS学习的一个核心内容。...当中涉及到的元素节点的属性和基本操作也是前台页面中最重要的组成,通过这些,才干使JS中基于对象的思想发挥作用。能够说,B/S UI页面中的一切都是建立在这些元素的基础之上的。

3.2K20

jsDOM理解

arguments.callee,func.caller,变量赋值前必须声 明,局部this必须被赋值 (Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数 复制代码 DOM...什么是DOM 1.DOM — > Document Object Model 2.DOM定义了表示和修改文档所需的方法。...DOM对象即为宿主对象, 由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。 也有人称DOM是对HTML以及XML的标准编程接口。...基本操作 遍历节点树: parentNode -> 父节点 (最顶端的parentNode为#document); childNodes -> 子节点们 firstChild -> 第一个子节点 lastChild...-> 最后一个子节点 nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点 基于元素节点树的遍历 parentElement -> 返回当前元素的父元素节点 (IE

4.2K30

JS DOM学习笔记

也可以赋值     window.location.reload();  //刷新当前页 10、window.event是IE下非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过...button";//input标签类型为按钮 btn.value = "提交"; //设置按钮值 document.appendChild(btn); //将按钮添加到文档中 13、不同浏览器中对DOM...支持的方法不一样 获取网页中那个元素触发了事件,在IE中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox...的不同 14、jQuery的ready和Dom的onload的区别:window.onload只能注册一次,是在所有Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在...Dom元素创建完毕后被触发,这样可以提高网页的响应速度 15、js打印一个对象的所有属性: //传入一个对象 function (swiper){ var msg = "";

4K40
领券