简易dom操作

最新推荐文章于 2022-06-06 21:46:03 发布
最新推荐文章于 2022-06-06 21:46:03 发布
阅读量107 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43755916/article/details/100738390
版权

获取元素对象

1，document.getElementById(“d1”);
2，d1，d2

获取/修改双标签

d1.innerHTML
d1.innerHTML=“”

获取/修改单标签

in1.value
in1.value=“123”;

HTML事件

1，单击事件
onclick事件,
2，获取焦点事件
onfocus
3，失去焦点事件
onblur

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	</head>
	<body>
		<div>
			<input id="user" type="text" onfocus="show1()" onblur="show2()">
			<span id="msg"></span>
		</div>
		<script>
			
			function show1(){
				msg.innerHTML="用户名在6-12"
			}
			function show2(){
				var text=user.value;
				if(text==""){
					msg.innerHTML="必须填写"
				}else if(text.length>=6 && text.length<=12){
					msg.innerHTML="正确"
				}else{msg.innerHTML="错误"}
			}
		</script>	
	</body>
</html>

	<script>
	console.log(d1);
	d1.innerHTML="<a href='http://www.baidu.com'>百度</a>";
	console.log(d2);
	d2.innerHTML="<table bgcolor='yellow' border='1px'><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table>"
	
	/*
		var element1=document.getElementById("d1");
		console.log(element1);
		var element2=document.getElementById("d2");
		console.log(element2);
		element1.innerHTML="<a href='http://www.baidu.com'>百度</a>"
		element2.innerHTML="<table bgcolor='yellow' border='1px'><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table>"
		
		*/
	</script>

1，DOM
文档对象模型
让js动态操作页面元素

2，BOM
浏览器对象模型
让js动态操作浏览器

高鹏飞白羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单操作
狼魂之力
12-09 71
package com.system.dqfn.action; import java.io.IOException; import java.util.ArrayList; import java.util.Date; import java.util.List; import com.system.action.SystemAction; import com.system.common.Pa...
ui.js:简易的DOM操作
04-29
《ui.js：简易的DOM操作详解》 在前端开发领域，DOM（Document Object Model）操作是不可或缺的一部分，它允许我们对HTML文档进行动态修改、添加和删除元素，从而实现丰富的用户交互。`ui.js`是一个专为简化DOM操作...
DOM操作的简化——JQuery （jQuery实现手风琴案例）
WYF857446152的博客
06-06 833
今天来给大家介绍一下jquery，jquery使得我们在dom操作有了更简单更高效率的代码执行。jquery的用法基本上是在dom操作上进行的简单语法。大家先看一下思维导图，大致了解一下jquery的操作，然后我再给大家具体的介绍一下用法。...
简单的DOM操作
Janner668的博客
02-21 206
简单的DOM操作 完整的JavaScript js核心 + DOM + BOM (1)js核心：ECMA Script (2)DOM：文档对象模型 使用js获取标签对象，修改标签的属性值和样式 (3)BOM：浏览器对象模型 使用js操作浏览器 DOM (1)为什么学ajax之前要学DOM 使用DOM，手写代码收集数据 ajax 不需要name属性，使用id 但是使用单选按钮和多选按钮还需要name为了分组 (2)使用DOM 2个步骤：获取要操作的元素对象；使用对象，调用方法和属性 举例：使用DOM操
【jQuery】jQuery简化的DOM五大操作
北平～
03-17 519
【查找】 1、 按选择器查找——$(…)支持所有的css选择器 我们在编写网页的时候，为了便于对元素的样式进行设置，为其设置选择器是必不可少的。jQuery出现后，选择器的存在就不单单是为了设置样式了，jQuery可以通过过滤选择器进行元素选择，进而对元素进行各种行为操作。 过滤操作： 基本过滤： //当用户点击按钮后，有id=“test”属性的元素将被隐藏 $(document).r...
关于DOM操作的性能优化
weixin_34033624的博客
11-13 163
最著名的有关用js操作dom的观点是：js和dom是独立的小岛，用桥实现两者的联系，但桥很窄，要过路费，所以我们要尽最大可能减少过桥的次数。下面代码演示了用js操作dom的innerHTML，且一下修改5000次： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti...
jQuery简化DOM操作
宁精勿杂 , 宁专勿多。
10-08 889
jQuery简化DOM操作 1.操作元素的属性 GET操作 jQ对象.attr(‘属性名’,‘属性值’); SET操作 jQ对象.attr(‘属性名’,‘属性值’);           //多个属性时，可用对象形式参数   操作后，新属性值会替换掉原有属性值 移除操作 jQ对象.rem
js使用DOM操作实现简单留言板的方法
10-24
在本实例中，我们将学习如何使用DOM操作来实现一个简单的留言板功能。 首先，我们需要理解DOM（Document Object Model）是什么。DOM是HTML和XML文档的结构化表示，它将网页内容抽象为节点树，每个HTML元素都是树中...
简易的购物车.zip
05-06
《简易购物车实现——DOM操作解析》 在Web前端开发中，DOM（Document Object Model）树是HTML或XML文档的一种结构化表示，它允许我们通过JavaScript或其他编程语言对页面元素进行动态操作。本项目“简易的购物车....
JavaScript简易贪吃蛇
04-29
总结，JavaScript简易贪吃蛇游戏展示了JavaScript的基础语法、DOM操作、面向对象编程以及游戏开发的基本原理。通过分析这个游戏，开发者可以深入理解JavaScript在实际项目中的应用，并掌握游戏开发的基本技巧。
JS实现简易留言板（节点操作）
11-21
通过学习这个实例，你可以了解JavaScript中关于节点操作的基本概念，如创建、添加和删除DOM节点，以及如何为节点添加事件监听器。 首先，我们需要理解的是，留言板的核心是用户输入的文本内容和删除功能。在HTML中...
JQuery （简化dom操作）
weixin_34192732的博客
03-10 224
简介 JQuery本质是一个js文件，里面是js常用功能的封装。比如绑定事件，修改内容，修改样式等。 $()是一个函数，是jQuery()的简写，它的一些重载函数见下。 $(elements) 将一个或多个dom对象(原生js获取到的dom对象)转化为jQuery对象。 $('#id1').html() //返回id为id1的jQuery对象，然后调...
DOM的简单介绍和操作
HelloImyHe的博客
08-23 1891
前言 JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。 事件 JS是以事件驱动为核心的一门语言。 ...
nodejs之MySQL插入数据
weixin_43755916的博客
09-06 9406
const mysql=require(‘mysql’); //创建链接池 var pool=mysql.createPool({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’, //使用的数据库 connectionLimit:20 //设置连接池的数量 }); //插入数据 pool...
nodejs 追加写入appendFile
weixin_43755916的博客
09-03 3491
追加写入appendFile 具有创建文件和追加写入的功能 fs.appendFile（路径，内容，回调函数） fs.appendFileSync（路径，内容） 如果文件不存在会创建文件，如果文件存在会追加到末尾 fs.appendFile(’./data1.txt’,‘hello\n’,(err)=>{ if(err) throw err; console.log(‘写入成功’); });...
nodejs读取文件readFile
weixin_43755916的博客
09-03 3000
nodejs读取文件readFile(路径，回调函数)、fs.readFileSync（路径） 读取的数据格式为buffer //读取文件 fs.readFile(’./data1.csv’,(err,data)=>{ if(err){throw err;} console.log(data); }); 练习：判断文件num.txt是否存在，如果不存在，创建该文件，写入数字0。读取文件中的内...
nodejs定时器
weixin_43755916的博客
08-23 2492
1、一次性定时器 //一次性定时器 var timer=setTimeout(回调函数，时间) var timer=setTimeout(()=>{ console.log(‘哈哈哈！蹦蹦蹦’); },3000); //清除一次性定时器clearTimeout clearTimeout(timer); //周期性定时器var timmer=setInteval(回调函数，时间) var ...
nodejs目录导入，第三方模块导入，核心模块
weixin_43755916的博客
08-23 1905
//目录导入，在目录中加入一个package.json文件，文件中键入{“main”:“test.js”}，意思是包名找test.js var obj=require(’./newdir’); console.log(obj); 第三方模块下载 自动下载地址： https://www.npmjs.com/ 需要已经安装OK的npm，一般安装了nodejs就会默认安装npm 在你的nodejs...
HTML属性和值
weixin_43755916的博客
09-10 903
通过属性和值进行修饰 <标记 属性1=“值1” 属性2=“值2” 属性3=“值3”></标记> 属性必须声明在开始在标记中 属性分类： 1，标准属性（通用属性） 所有元素都支持的属性 id：定义元素在页面中唯一标示 tittle：鼠标悬停在元素上的提示文本 class：css中，引用类选择器 style：css中，定义行内样式 ,2，专用属性，只对一些（某个）标签起作用 &...
用DOM制作一个简易留言板
最新发布
05-30
上面的代码利用DOM操作实现了一个简易的留言板，包含姓名和留言内容两个输入框和一个添加留言按钮，点击按钮可以将输入的姓名和留言内容添加到留言列表中，同时清空输入框。留言列表按时间倒序排列，最新的留言显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值