原生JS操作DOM，项目内容积累

最新推荐文章于 2024-10-03 00:49:38 发布
原创 最新推荐文章于 2024-10-03 00:49:38 发布 · 523 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用DOM API进行网页元素的获取、创建、添加等基本操作，包括通过不同属性选择节点及对节点内容进行修改的方法。

一 获取

1. 通过各种名称获取

document.getElementsByClassName("content");
document.getElementsByTagName("p");
document.getElementById("main");
document.getElementsByName("name");
2. 获取祖父子节点 

aimNode.firstChild;//获取目标节点的第一个子节点
aimNode.lastChild;//获取目标节点的最后一个子节点

二 增

1. 创建

document.createElement('span');
document.createTextNode("此项为必填项");//创建文本

2.添加

fatherNode.appendChild(childNode);

三 删

四 修改

50款原生js案例（绝美整合）
10-26
50款原生js案例（绝美整合），半年整理的库存，各种js插件库存，效果，绝对有您喜欢的效果！
todolist项目，js原生入门项目
12-21
使用原生javascript技术实现了简单的增删改查功能，使用了localstorage本地存储。
原生JS经典小项目-网页布局
05-18
原生JS经典小项目-网页布局
js的原生项目
樊小勇的博客
04-19 3521
JS原生项目 知识点-思维导图 JS作用 实际项目里js的应用点 1.获取数据渲染页面 2.页面上数据的处理 3.页面跳转时数据的传输 可见，JS的真正作用是处理数据 下面是我根据导图，结合项目代码进行的一些总结 项目总结 基本知识点 一、面向对象编程方式 我们把要处理的页面当一个对象比如对影片列表处理的时候 var pian = { // 对影片页面处理，我们创建一个对应的对象pi...
原生js 操作dom
haliofwu的专栏
12-08 293
ng-click="brandFnc($event)" $scope.brandFnc = function($event) { // 通过 $event.target 来获取 } ev.target.parentElement ev.target.parentElement.children[0].src ev.target.previousElementSibling ev.target
原生JS实现循环Nodelist Dom列表的4种方式示例
10-18
在JavaScript中，Nodelist对象是DOM操作中常见的一种类型，它表示一组节点，通常是由`querySelectorAll`等方法返回...在学习JavaScript的过程中，不断积累和理解DOM操作的技巧，可以帮助你编写出更高效、更优雅的代码。
基于JavaScript DOM操作的猪游戏小项目
“Pig-Game: JS Dom操作小项目”是一个基于JavaScript语言实现的前端交互式小游戏，该项目主要聚焦于使用原生JavaScript对DOM（文档对象模型）进行动态操作，是初学者掌握前端开发中事件处理、HTML结构控制与CSS样式...
JavaScript-30：30天掌握原生JavaScript项目实战
标题中的“Vanilla JS”强调了其纯粹性——仅使用原生JavaScript进行开发，这不仅有助于理解语言本身的强大功能，还能提升对DOM操作、事件处理、异步编程、CSS交互等关键技能的掌握。 从描述中可以看出，该项目以...
香草JS迷你项目：原生JavaScript实战应用
“vanillajsprojects:香草JS迷你项目”是一系列基于原生JavaScript（即“香草JS”）构建的小型前端Web应用程序集合，旨在通过实际项目提升开发者的编程能力与实战经验。这些项目完全不依赖任何现代前端框架（如React...
使用原生JavaScript开发的 VanillaJS 项目集合
项目中的第一个完成的应用是“计算器”，这是一个经典的入门级JavaScript练习项目，主要目的是帮助开发者理解事件监听、DOM操作、数据处理与用户交互逻辑。通过实现一个功能完整的计算器，开发者需要掌握如何使用...
原生js操作dom
True_cl的博客
01-04 309
js一共分为三个部分，分别是ECMAScript，DOM ， BOM。 一，常用的DOM的API 分别有通过id获取标签,通过class获取标签,通过name获取标签,通过标签名获取标签,一般来说都是通过标签名来获取标签 代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
原生js操作DOM
WeiAiGeWangFeiYuQing的博客
11-21 716
目录内容操作表单元素闭合标签属性操作闭合标签表单元素样式操作行间样式行外样式元素类（class）操作获取类设置类删除类图片src操作 内容操作 表单元素 对于input这种半闭合标签，操作内容是操作它的value值。 （1） 获取value —&amp;amp;amp;amp;amp;amp;amp;amp;gt; 元素.value （2）设置value —&amp;amp;amp;amp;amp;amp;amp;amp;gt; 元素.value = 值 &amp;amp;amp;a
原生js的dom操作
weixin_小白鼠的博客
09-16 701
dom操作 获取dom 标签名获取 doucment.getElementByTagName("div") document.querySelector("div") className获取 document.getElementByClassName("class") document.querySelectorAll(".class") document.querySelector(".class") 前两个获取的是所有含有"class"这个类名的dom,返回一个类数组 最后一个是获取第一个含
原生JS操作DOM的一些常用方法集合【转】
weixin_30460489的博客
06-24 227
一直用JQuery，今天忽然想不用JQuery实现一些功能，在这个过程中，发现自己对原生的JS很不熟悉，找了点资料，在此做个记录吧！ JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.example:<div id="divid"&gt...
原生JS-DOM操作
乐于探索,乐于奉献,追求极致,向往生活
12-07 503
前言： 开头不妨咱们先一块了解下，究竟什么是“原生的JS”，这样也帮助咱们构建一个完整的知识体系。 1：ECMAScript:规定了js语言核心语法的标准；2：Dom专门操作网页内容的API，例如常见的操作document.write("")；3：Bom专门操作浏览器窗口的API，例如弹出浏览器的提示框（alert.prompt("")）。 -------------------------...
原生JS操作DOM方法
ALIN的博客
04-12 238
dom.parentNode; //得到父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChild; //获得第一个子节点 dom.lastChild; //获得最后一个子节点 dom.parentNode; //获得父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChi.
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2351
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
原生 JS 操作 DOM 元素
最新发布
weixin_64684095的博客
10-03 1060
通过元素的`id`属性来查找单个元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值