js 操作dom经典实例

JavaScript操作DOM（Document Object Model）是前端开发中的核心任务之一。以下是一个经典的实例，展示了如何使用JavaScript来操作DOM元素。

基础概念

DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。

类型与应用场景

节点操作：添加、删除、替换节点。
属性操作：修改元素的属性。
样式操作：改变元素的CSS样式。
事件处理：绑定事件监听器。

经典实例

以下是一个简单的例子，演示了如何使用JavaScript来创建一个新的段落元素，并将其添加到现有的HTML文档中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作实例</title>
</head>
<body>
    <div id="content">
        <p>这是一个段落。</p>
    </div>

    <script>
        // 创建一个新的段落元素
        var newParagraph = document.createElement("p");
        
        // 为新段落添加文本内容
        var textNode = document.createTextNode("这是新添加的段落。");
        newParagraph.appendChild(textNode);
        
        // 获取id为"content"的元素
        var contentDiv = document.getElementById("content");
        
        // 将新段落添加到div中
        contentDiv.appendChild(newParagraph);
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：元素未正确显示

原因：可能是由于JavaScript代码在DOM完全加载之前执行，导致无法找到目标元素。 解决方法：将JavaScript代码放在window.onload事件中，或者使用DOMContentLoaded事件确保DOM已完全加载。

window.onload = function() {
    // 上面的JavaScript代码
};

问题2：样式未生效

原因：可能是由于样式表未正确链接，或者内联样式被覆盖。 解决方法：检查CSS文件的链接是否正确，或者在JavaScript中使用style属性直接设置样式。

newParagraph.style.color = "blue";

问题3：事件监听器未触发

原因：可能是由于事件监听器未正确绑定，或者事件名称拼写错误。 解决方法：确保事件名称正确，并且监听器已正确绑定到元素上。

document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

通过这些基础概念和实例，你可以开始理解和掌握JavaScript操作DOM的基本方法。在实际开发中，根据具体需求灵活运用这些技巧，可以有效提升用户体验和页面的动态交互性。

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

有帮助

没帮助

相关·内容

Javascript DOM操作实例

最近在学DOM，但是还是没有办法很好的记住API，想找些例子来练习，网上的例子将一个个DOM对象方法挨个举例，并没有集合在一起用，效果不尽人意。...所以自己写一份实例，顺便巩固下学到的知识。这个例子很简单，主要就是操作ul下面的li，但是会贯穿很多DOM的对象方法。 ...至此，DOM简单的实例完成了。　　这里是完整代码 ``` DOM

9263 0

js之dom元素样式操作

一、元素的样式的获取二、style的设置三、获取dom元素的非行内样式四、window.getComputedStyle() 方法的使用 1. getComputedStyle() 用法 2....操作样式只能操作元素的行内样式二、style的设置原生js可以单独设置元素的行内样式。...btn.style.width = "200px"; btn.style = "width:120px;height: 30px;color:white;"; 三、获取dom元素的非行内样式非行内样式只能获取不能设置...原生js操作的都是行内样式，那么怎么获取非行内样式呢？...js改变DOM样式的三种方式方法一：最简单也是最直接的方法就是直接修改DomNode的style属性：如下面的代码` var node = document.getElementById('node

10.6K0 1

原生 JS DOM 常用操作大全

DOM DOM文档对象模型又称为DOM树 DOM树由文档、元素、节点组成文档：一个页面就是一个文档，元素：文档中的所有标签都称为元素。...DOM中使用Element表示节点：文档中的所有内容，在文档中都是节点（标签、属性、文本注释等）DOM中使用node表示获取元素都以 document ....、checked 、selected 、disabled 获取属性的值元素对象.属性名设置属性的值元素对象.属性名=值按钮样式属性操作通过 js 修改元素大小,...在标签中设置使用 js设置 Element.setAttribute("data-index",2) 节点操作 node 表示父级 child 表示子级...的核心总结 DOM操作，我们主要针对于元素的操作。

1081 0

干货丨JS 经典实例收集整理

浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。...通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型，异步加载流程是并发模型。...四、js获取屏幕坐标 js拖拽效果 "); } 九、阻止表单重复提交有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作

1.5K2 0

Js DOM

什么是DOM DOM，文档对象模型（Document Object Model）。 HTMLCollection 对象注意：IE9及以上版本才支持！...secondp') // 将新的元素和旧的元素进行替换 ele.replaceChild(newele, secondp) 操作样式...www.baidu.com' link.style.color = 'red' link.style.fontSize = '24px' 操作类...myclass[0].className = 'aaa' console.log(myclass[0].className); //aaa 操作属性...show1() { console.log('show1'); } 取消默认事件 1，可在onclick=""上直接加return false 2，通过获取dom

3.7K1 0

dom操作

节点的一个方法 Node.hasChildNodes(); 节点类型元素节点–1 属性节点–2 文本节点–3 注释节点–8 document-9 DocumentFragment–11 dom...基本操作（元素）增 document.createElement(’’); document.cteateTextNode(’’); document.createComment(’’);//创建注释节点...document.createDocumentFragment(’’); 删 parent.removeChild(); child.remove(); 插 parentnode.appendChild();(任何元素节点都有，剪切操作...) parentnode.insertBefore(newElement,targetElement); 替换 parent.replaceChild(new,origin); dom操作（属性）...,“属性值”);//设置属性 element.getAttribute(“属性名”);//获取属性值修改样式节点.style.样式=value；克隆节点 cloneNode(); 表格操作

6812 0

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.9K6 0

js_jQuery【下拉菜单联动dom操作】

下拉菜单联动dom操作案例源码： js

14.1K3 0

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等等

4032 0

DOM操作

js-container"> 操作接口表示的是没有父节点的最小的文档对象。...DocumentFragement通常用来创建一个文档片段，然后将创建的DOM元素插入到文档片段中，最后把文档片段插入到DOM树中。在DOM树中，文档片段会被替换为它所有的子元素。...(), itemDom = null; // 先将li添加到contentFragment，已减少dom操作 for(let i = 1; i <= 500; i++) { itemDom...如果UI线程很忙，可能会处理用户操作，那么该代码将不会立即执行； window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画

8862 1

HTML JS DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。...HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。...HTML DOM 树 ? 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

9.6K2 0

JS它DOM

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

3.2K2 0

js DOM系统

justify-content: space-between; font-size: 20px; margin-bottom: 10px; } DOM

6.6K3 0

DOM操作(20171027)

image.png 2.jquery DOM 操作案例一：通过节点添加实现表格排序 eg: $(function() { $("thead th:gt(0)").click

5323 0

JavaWeb——JQuery之DOM操作应用及实践案例总结（DOM内容操作、DOM属性操作、CRUD操作）

选择器作用就是找到元素对象，找到后进行具体的操作就是DOM操作。...1 DOM内容操作内容操作的三个方法： 1）html()：获取/设置元素的标签体内容，如内容，获取a标签中的内容就是内容； 2）text.../js/jquery-3.3.1.min.js"> $(function () { // 获取myinput 的value.../js/jquery-3.3.1.min.js"> $(function () {.../js/jquery-3.3.1.min.js"> .one{ width: 200px; height

3.1K5 0

jquery dom操作

var li=$("ul i:eq(1)") var li_txt=li.text() alert(li_txt)

9011 0

javaScript操作DOM

DOCTYPE html> javaScript操作DOM Hello DOM ThisHello javaScriptDOM 2.对应的树状图，其中代表HTML...) - 插入节点 appendChild() insertBefore() - 删除节点 removeChild() - 替换节点 replaceChild() 7.事件操作...btn.onclick = function () { alert('clicked'); alert(this.id); // mybtn } DOM2 级事件处理程序 DOM2 级事件定义了两个方法...，用于处理指定和删除事件处理程序的操作： addEventListener() 和 removeEventListener()。

6094 0

jQuery DOM操作

序号方法描述实例 1 append() 向每个匹配的元素内部追加内容。...（1）remove() 删除DOM中所有匹配的元素，可以传入参数来筛选要删除的元素。...replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。而replaceAll()和replaceWith()作用相同，只是颠倒了操作。.../scripts/jquery.js" type="text/javascript"> //js" type="text/javascript"> //<!

2K6 0

jQuery DOM操作

一、创建元素只需要把DOM字符串传入$方法即可返回一个jQuery对象 var obj = $('Done')...、添加元素 1、.append(content[,content]) / .append(function(index,html)) 都是放在目标对象尾部，作为子元素可以一次添加多个内容，内容可以是DOM...对象、HTML string、 jQuery对象如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html...innerHTML 当传递了一个string参数的时候，修改元素的innerHTML为参数值** 看个例子 $('div').html() $('div').html('123') 如果结果是多个进行赋值操作的时候会给每个结果都赋值...6、text() 和html方法类似，操作的是DOM的innerText值 ?

9913 0

JS DOM学习笔记

setTimeout只执行一次，setInterval可以不断的执行无数次 6、onload(页面加载后触发）：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素...，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。...支持的方法不一样获取网页中那个元素触发了事件，在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 = "";

4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 操作dom经典实例

基础概念

相关优势

类型与应用场景

经典实例

遇到的问题及解决方法

问题1：元素未正确显示

问题2：样式未生效

问题3：事件监听器未触发

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐