首页
学习
活动
专区
工具
TVP
发布

DOM操作

1.概述 1.1DOM DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。文档对象模型 (DOM) 是HTML和XML文档的编程接口。...浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。...所以,DOM可以理解成网页的编程接口。 DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将web 页面和脚本或编程语言连接起来了。 ?...1.3节点 DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。 节点的类型有七种。...1.父节点关系(parentNode):直接的那个上级节点 2.子节点关系(childNodes):直接的下级节点 3.同级节点关系(sibling):拥有同一个父节点的节点 DOM提供操作接口

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

DOM操作

操作 ​ 接口表示的是没有父节点的最小的文档对象。...DocumentFragement通常用来创建一个文档片段,然后将创建的DOM元素插入到文档片段中,最后把文档片段插入到DOM树中。在DOM树中,文档片段会被替换为它所有的子元素。...因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面重绘(reflow)(对元素位置和几何上的计算)。...操作 for(let i = 1; i <= 500; i++) { itemDom = document.createElement("li"); itemDom.innerText...如果UI线程很忙,可能会处理用户操作,那么该代码将不会立即执行; window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画

84521

DOM操作

, 30 3月 2021 作者 847954981@qq.com 前端学习 DOM操作 在学习了JavaScript之后,我们会想,如何使用JavaScript来操纵HTML呢。...其实HTML中的每一个对象都是一个DOM对象,其以一种树状图形式表现 如图 1.树根是 DOCUMENT,也可以称为整个页面文档 2....每个 HTML 标签我们称之为 DOM 节点,英文为Node或者ELement 3. 每个 HTML 标签包裹的子标签,在树上体现为分支,称为儿子节点。比如上图,P和H1都是DIV的儿子节点。...那么我们知道了HTML的DOM间的关系,接下来我们需要的是去获取HTML的DOM来方便我们使用JavaScript进行修改 使用如下代码,获取main下的.core之后的.subtitle标签的DOM...(‘style’, ‘width: 100%; height: 100%;’);属性修改(可以修改class id 等等) dom.style.color = ‘xxxx’;具体属性修改 标签dom等等

36820

前端学习(47)~DOM简介和DOM操作

DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。...什么是DOM DOM:Document Object Model,文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。...目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。...解析过程: HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。...DOM节点的操作(重要) 上一段的内容:节点的访问关系都是属性。 本段的内容:节点的操作都是函数(方法)。

1K30

回到基础:什么是DOMDOM操作

文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web 页面进行交互。 什么是 DOM ?...DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。...这背后有一个合理的原因:原生DOM API提供了大量像JQ这样操作DOM的简便方法,足以替代jQuery一些常用的DOM操作。 如果只是想进行简单的交互和操作,请使用普通的JS。...咱们甚至可以创建自己的迷你框架来抽象最常见的操作:创建元素、追加、创建文本。 总结 DOM是浏览器创建并保留在内存中的网页的虚拟副本。创建、修改、删除 HTML 元素,这些属于 “DOM 操作”。...jQuery不会很快消失,但是每个JS开发人员都必须知道如何使用原生API操作DOM。这样做有很多原因,额外的库增加了JS应用程序的加载时间和大小,更不用说DOM操作在技术面试也经常出现。

86610

DOM操作笔记

一、DOM简介 1、定义: DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。...2、作用 它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。...3、节点 DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。 节点的类型有七种。...关闭后,如果重新调用document.write()就会重新去打开一个新的文档流,并写入数据 三、选中Element的方式 dom操作,分为两步:1是选择它,2是操作它 1、getElementById...操作dom元素的style属性 document.querySelector('p').style.color = 'red' document.querySelector('.box').style.backgroundColor

98440

angularJS的DOM操作

AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是AngularJs...是不建议和JQuery同时使用的,所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite       查阅官方提供的api,可以看到使用方法是angular.element(ele)...angular.element:将DOM元素或者HTML字符串一包装成一个jQuery元素。...每个元素的父元素,可以提供一个可选的选择器 prepend()-将参数内容插入到每个匹配元素的前面(元素内部) prop()-获取匹配的元素集中第一个元素的属性(property)值 ready()-当DOM...准备就绪时,指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。

5310
领券