开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

直接在document.body上调用DOM方法appendChild与首先使用queryselector有什么不同

直接在document.body上调用DOM方法appendChild与首先使用querySelector有以下不同之处：

功能不同：appendChild是DOM方法，用于将一个元素节点添加到指定父节点的子节点列表的末尾；而querySelector是选择器方法，用于通过指定的CSS选择器选择匹配的第一个元素节点。
使用方式不同：appendChild是直接在指定的父节点上调用方法，将要添加的子节点作为参数传递；而querySelector需要先通过选择器选择匹配的元素节点，然后再对选中的元素节点进行操作。
返回值不同：appendChild没有返回值，它直接修改DOM结构；而querySelector返回匹配的第一个元素节点，如果没有匹配到任何元素节点，则返回null。
适用场景不同：appendChild适用于在指定的父节点上添加子节点，常用于动态创建和插入新的DOM元素；而querySelector适用于根据选择器选择匹配的元素节点，常用于获取特定的DOM元素进行操作。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WebComponent魔法堂:深究Custom Element 之面向痛点编程

UI/UX上符合要求，技术的事你说了算。"...树 document.querySelector('#mount-node').appendChild(input) 由于声明式注重What to do，而命令式注重How to do，并且我们操作的是...于是我们勉强可以这样 // 元素实例化 const myAlert = new Alert() // 添加到DOM树 document.querySelector('#mount-node').appendChild...(myAlert.el) /* 由于Alert无法正常实现HTMLElement和Node接口，因此无法实现 document.querySelector('#mount-node').appendChild...生命周期很重要当定义一个新元素时，有3件事件是必须考虑的：元素自闭合: 元素自身信息的自包含，并且不受外部上下文环境的影响; 元素的生命周期: 通过监控元素的生命周期，从而实现不同阶段完成不同任务的目录

8595 0

DOM扩展

1. querySelector()方法 querySelector()接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素返回null。...scrollIntoView()可以在任何元素上调用。默认或传入true，窗口会滚动让调用元素与视口顶部尽可能齐平；传入false，调用元素尽可能会全部出现在窗口中。...四、专有扩展 1. children属性 children属性与childNodes没有什么区别。 2. contains()方法判断某个节点是不是另一个节点的后代。...其对文本进行操作，使用方式类似于innerHTM和outerHTML。 4. 滚动 HTML5将scrollIntoView()方法纳入规范之后，仍还有其他几个专有方法可以在不同的浏览器中使用。...如果当前元素在视口中可见，这个方法什么也不做。true，尽量将元素在显示视口中部（垂直方向）。 ?

1.5K3 1

无界微前端是如何渲染子应用的？

qiankun 基于 import-html-entry 解析 HTML，而无界则是借鉴 import-html-entry 代码，实现了自己的 HTML 的解析，因此两者在解析 HTML 上的不同，主要是在.../comp.vue' // 传入根组件 const app = createApp(Comp) // 指定挂载点 app.mount('#app') 挂载到 #app，实际上使用 document.querySelector...挟持 document 的属性/方法上一小节，通过 proxyDocument.querySelector，就能从 shadowRoot 查找元素但这样有一个坏处，就是要将 document 改成...JS 代码，不需要另外包一层函数执行 JS 在无界微前端中，有非常多像 querySelector 的属性/方法，需要对每个属性方法的副作用进行修正。...(node, iframeWindow); return res; }; 事实上，除了 appendChild，还有其他的函数需要修正，在每个能够创建 DOM 的位置，都需要进行修正，例如 insertBefore

1.2K3 0

无界微前端是如何渲染子应用的？

目前的使用效果非常好，不仅性能表现出色，而且使用体验也不错。尽管在使用的过程中，我们也遇到了一些问题，但这些问题往往源于我们对框架实现的不熟悉。我们深入研究了无界技术的源码，并将在本文中与大家分享。...qiankun 基于 import-html-entry 解析 HTML，而无界则是借鉴 import-html-entry 代码，实现了自己的 HTML 的解析，因此两者在解析 HTML 上的不同，...挟持 document 的属性/方法上一小节，通过 proxyDocument.querySelector，就能从 shadowRoot 查找元素但这样有一个坏处，就是要将 document 改成 proxyDocument...中取值，这样，就能直接执行子应用的 JS 代码，不需要另外包一层函数执行 JS在无界微前端中，有非常多像 querySelector 的属性/方法，需要对每个属性方法的副作用进行修正。...node, iframeWindow); return res;};事实上，除了 appendChild，还有其他的函数需要修正，在每个能够创建 DOM 的位置，都需要进行修正，例如 insertBefore

5.2K3 0

前端温习(二)： Javascriput 核心对象 Document 对象

are text nodes 注释是注释节点 Document不同获取办法对于正常的网页，直接使用 document 或 window.document 对于 iframe 载入的网页，使用 iframe...返回文档的绝对基础 URI document.body 返回文档的body元素 document.cookie 设置或返回与当前文档有关的所有 cookie document.doctype 返回与文档相关的文档类型声明...var elem = document.getElementById("para1"); getElementById 方法与 querySelector 方法都能获取元素节点，不同之处是 querySelector...与 querySelector 方法一样，querySelectorAll 方法无法选中 CSS 伪元素。...这样做的好处在于，因为 DocumentFragment 不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的 DOM 有更好的性能表现。

7452 0

JavaScript 编程精解中文第三版十四、文档对象模型

一棵典型的树有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用节点常常包含子节点，而标识符、值则是叶子节点，也就是没有子节点的节点。 DOM中也是一样。...相反，你首先需要创建节点，然后使用副作用，将子节点和属性逐个添加到节点中。大量使用 DOM 的代码通常较长、重复和丑陋。但这些问题并非无法改善。...但它仍然不是一个真正的数组，所以如果你打算将其看做真的数组，你仍然需要调用Array.from。 querySelector方法（没有All）与querySelectorAll作用相似。...两个函数都将参数解释为圆上的一个位置，0 表示圆上最右侧那个点，一直逆时针递增到2π（大概是 6.28），正好走过整个圆。...我们可以通过样式来改变文档的显示方式，可以直接在节点上附上样式，也可以编写匹配节点的规则。样式包含许多不同的属性，比如color和display。

1.4K2 0

事件

事件对象在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象，但支持方式不同。...event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含 ?...，事件会停止传播 IE中的事件对象访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。...事件和DOM2级在事件监听使用方式上有什么区别？...二者区别：使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。

1.4K3 0

DOM操作笔记

3、节点 DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。节点的类型有七种。...如果页面已经渲染完成关闭了，再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入 ? 我们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。...关闭后，如果重新调用document.write()就会重新去打开一个新的文档流，并写入数据三、选中Element的方式 dom的操作，分为两步：1是选择它，2是操作它 1、getElementById...这样做的好处：因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。举个例子解释 ?...(text) contain.appendChild(date) contain.removeChild(date) 5、clone元素 cloneNode()方法用于克隆元素，方法有一个布尔值参数

1K4 0

【前端性能】必须要掌握的原生JS实现JQuery

jquery见效较快，属于前期较快后期较慢，没有气的支持，成长会越来越慢网上找代码，好比赵敏找六大门派高手偷绝学，直接对症下药，需要什么拿什么用什么，只注重伤敌（结果），无所谓剑与气。...(".my-class") jQuery DOM 操作的原生实现 JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。...那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。...hide 的原生实现 show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。...、classList等方法，确实需要考虑兼容问题，关于它们的兼容性，请猛戳这里：querySelector/querySelectorAll, classList, getElementsByClassName

1.3K3 0

JS基础第二课（元素篇）

介绍元素前，带小伙伴们了解一下，什么是DOM？...一、DOM：全称Document Object Model(文档对象模型)1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构2、XML 是一种标记语言类似html...，被设计用来传输和存储数据3、DOM可以把网页和脚本语言以及其他编程语言联系起来4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）二、获取元素的五种方式1、根据ID获取返回元素对象（仅获取到匹配的第一个元素的标签...); divDom.addEventListener('click',function(){ alert('点击成功') })（3）直接在标签上编写4、修改样式属性（1）格式：dom.style.样式属性 = 值（2）适用于较少的样式修改（3）复合型的属性需要用驼峰的编写方法，否则会出错

7252 0

打开控制台也删不掉的元素，前端都吓尿了

它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。...0), n.appendChild(e)) }) } ).observe(document.body, { attributes...; // 为什么这么做？...那么，不如我们把内容挪走，再把body隐藏(appendChild具有“吸走”的效果) // 控制台选中主内容, 即document.querySelector('水印元素选择器') document.documentElement.appendChild...死循环的确是会发生的，使用的时候需要注意一下如果要解决MutationObserver监听document.documentElement阻止挪水印元素，那也还是有办法，documentElement

1.3K2 0

秒懂 Web Component

是什么 Web Components 实际上一系列技术的组合，主要包含 3 部分：自定义元素。在 HTML 基础标签外扩展自定义标签元素 Shadow DOM。...主要用于将 Shadow DOM 的内容与外层 document DOM 隔离 HTML 模板。...自定义元素首先，创建一个 index.html，在里面直接调用组件。 <script src="....目前比较出名的<em>有</em>微软出品的 FAST[2]： <em>有</em> Google 出品的 Lit[3]：还有<em>有</em>我厂腾讯的 OMI[4]：总结上面主要给大家分享了一下 Web Component 的一些<em>使用</em><em>方法</em>...结构关于 Web Component 的内容，已经差不多说完了，不知大家看完<em>有</em><em>什么</em>感受。

6894 0

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。...什么是Document对象 Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。...获取元素通过Document对象，我们可以使用不同的方法获取HTML文档中的元素。...通过CSS选择器获取元素使用querySelector方法可以通过CSS选择器获取元素。这允许您更灵活地选择特定元素，而不仅仅是根据id或标签名。 <!...以下是一些常见的DOM事件： click: 当元素被单击时触发。 mouseover: 鼠标悬停在元素上时触发。 keydown: 键盘按键被按下时触发。 submit: 表单被提交时触发。

2652 0

MutationObserver接口-1-基本用法

基本用法使用MutationObserver可以观察整个文档、DOM树的一部分或某个元素。...observe()方法实例化出一个MutationObserver对象之后，这个对象实际上就是一个观察者，但是，这个观察者这个时候还不知道自己要观察什么。...这个时候需要调用observer方法来将它和DOM关联起来。此方法接收两个必须参数：要观察其变化的DOM节点、一个用于控制观察哪些方面的配置对象。...只需要多次调用observe()方法，就能够复用一个MutationObserver对象观察不同的目标节点。还可以通过 MutationRecord的target属性可以标识发生变化的目标节点。...为了不让这个观察者无所事事，可以重新使用它，让它观察新的目标节点(也可以是之前观察过的节点)，实际方法还是调用observe()方法。

4432 0

28·灵魂前端工程师养成-DOM编程

-擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。...DOM自带的API接口，是真的很智障，反人类，于是乎后来就有了使用：JQuery来操作DOM，使用VUE操作DOM，使用React操作DOM，后面我们就会学习，JQuery，VUE，React 获取元素...工作中： document.querySelector('#idxxx') document.querySelectorAll('.red')[0] 自己做项目：我们可以偷偷使用下面的方法，但是不要让老板发现...和 querySelectorAll // 类似于CSS的调用方式，我们调用div里面的span的第二个元素 document.querySelector('div>span:nth-child...(text1) div1.innerText = '你好' 或者 div1.textContent = '你好' // 但是不能用 div1.appendChild('你好') ---- 显示在网页上

4291 0

Web Components(Sahdow DOM自定义元素)入门

shadow DOM有以下特点： shadow DOM与外部html是隔离的，外面用外面的样式，里面用里面的样式。...总结起来就是，shadow DOM可以把一部分html代码隔离起来，与外部完全不会互相干扰。跟iframe不同的地方在于，我们可以调用外部的方法，这样就不会出现弹窗局限于内部窗口的尴尬情况。...() 方法来将一个 shadow root 附加到任何一个元素上。...请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。...source 对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

6172 0

Web Components 上手指南

Web Components 本身不是一个单独的规范，而是由一组DOM API 和 HTML 规范所组成，用于创建可复用的自定义名字的 HTML 标签，并且可以直接在你的 Web 应用中使用。...生命周期自定义元素的生命周期比较简单，一共只提供了四个回调方法： connectedCallback：当自定义元素被插入到页面的 DOM 文档时调用。...下面演示一下使用方法： class HelloUser extends HTMLElement { constructor() { // 必须调用 super 方法 super();...video 标签创建 Shadow DOM 我们可以在任意一个节点内部创建一个 Shadow DOM，在获取元素实例后，调用 Element.attachShadow() 方法，就能将一个新的 shadow-root...closed mode HTML templates（HTML模板）前面的案例中，有个很明显的缺陷，那就是操作 DOM 还是得使用 DOM API，相比起 Vue 得模板和 React 的 JSX 效率明显更低

9403 0

遇到这三个 api，你会把它封装成组件么？

接收 attach、children 参数，attach 就是挂载到的 dom 节点，默认是 document.body 然后提供一个 getAttach 方法，如果传入的是 string，就作为选择器来找到对应的...dom，如果是 HTMLElement，则直接作为挂载节点，否则，返回 document.body：然后在 attach 的元素下添加一个 dom 节点作为容器：当组件销毁时，删除这个容器 dom...appendChild?.(container); return () => { parentElement?.removeChild?....内部封装了选择 attach 节点的逻辑，还会创建容器 dom 并通过 ref 返回。还是有一些封装的价值。...再次渲染的时候，调用 useMutateObserver 就有 dom 了，可以用 MutationObserver 来监听 dom 变化。

901 0

从零开始学习DOM-BOM(二)

文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。...Element，document 和 window 是最常见的 event targets EventTarget有三个原型方法，在window和DOM元素上都可以使用 addEventListener...概述 DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。 Node是一个接口，各种类型的 DOM API 对象会从这个接口继承。...const strongEl = document.createElement("strong") strongEl.textContent = "我是strong元素" divEl.appendChild...[0] 返回当前文档html内容 console.log(document.body) console.log(document.title) document.title = "Hello World

2791 0

JavaScript 高级程序设计（第 4 版）- DOM

节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。...在 Document上使用 querySelector()方法时，会从文档元素开始搜索；在Element上使用querySelector()方法时，则只会从当前元素的后代中查询。...使用这个方法可以方便地检测某个元素会不会被querySelector()或querySelectorAll()方法返回。...# 滚动虽然 HTML5 把scrollIntoView()标准化了，但不同浏览器中仍然有其他专有方法。...# 范围 # DOM范围 DOM2 在 Document 类型上定义了一个 createRange()方法，暴露在 document 对象上。使用这个方法可以创建一个 DOM 范围对象。

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭