JavaScript——dom查询练习

最新推荐文章于 2022-11-15 23:21:14 发布
最新推荐文章于 2022-11-15 23:21:14 发布
阅读量90 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongshun0928/article/details/115365128
版权

css文件

@CHARSET "UTF-8";

body {
   
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
   
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
   
	float:left;
}

#total{
   
	width: 450px;
	float:left;
}

ul{
   
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
   
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
   
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
    
		//1.查找#bj节点
		document.getElementById("btn01").onclick = function () {
    
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
    
			var lis = docum
最低0.47元/天 解锁文章
Pureso
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习-Dom(练习)
mashirokayo的博客
08-25 307
JS-Dom练习
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1756
整一些可以练着玩的熟悉语法的DOM小例子
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
05.DOM 查询练习-节点练习
01-08
尾部附上整体代码！ 1， //1.查找#bj节点 document.getElementById('btn01').onclick = function () { var biObj = document.getElementById(bj) alert(biObj[removed]) } 结果： 2, //2.查找所有li节点 var btn02Ele = document.getElementById(btn02); btn02Ele.onclick = function(){ var lis = document.getElementsB
JavaScript——DOM
03-18
JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。DOM允许开发者通过JavaScript或...
【JavaScript】DOM实战练习之选项卡切换
最新发布
08-10
在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中，我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式，它将大量信息组织成可切换的分块，以...
网页模板——javascript 在线打字练习.zip
11-22
【标题】"网页模板——javascript 在线打字练习"揭示了这个压缩包文件的主要内容，它是一个基于JavaScript技术实现的在线打字练习平台的网页模板。JavaScript，作为全球最广泛使用的编程语言之一，通常用于增强网页...
uQuery:JavaScript练习
05-16
**JavaScript查询库——uQuery** JavaScript作为一种广泛应用于前端开发的脚本语言，其在处理DOM操作、事件处理、数据管理等方面具有强大的功能。为了简化这些操作，开发者们常常会使用库或框架，如jQuery，它提供...
EloquentjavascriptExercise:实践口才的javascript练习
04-29
1. 变量和数据类型：JavaScript支持六种基本数据类型（数字、字符串、布尔值、null、undefined和Symbol），以及一种复杂数据类型——对象。变量声明使用`var`、`let`或`const`关键字，它们之间有不同的作用域规则。 ...
JavaScript DOM事件进阶及相关练习
m0_56649557的博客
07-26 639
事件 事件：事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、键盘输入等具体的动作，是实现页面交互的方式。 事件的三要素 事件源：触发事件的元素 (谁触发了事件) 事件类型：如click单击事件 (触发了什么事件) 事件处理程序: 事件被触发后所执行的代码(函数形式)，也称为事件处理函数 <body> <button type="button" id="btn">单击事件</button>
Javascript中DOM的练习
weixin_30693683的博客
01-04 132
第一个题：html计时器 方法一： <body onLoad="show()" > <div id="b"></div> </body> </html> <script type="text/javascript"> function show() {var d=new Date(); var no...
[知了堂学习笔记] javascript DOM练习案例
mili_dou的博客
12-08 301
随机验证码的实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #image{ height: 40px; width:
(5)JavaScript DOM练习题
魚
11-24 1437
题目1：点击每个 li节 点 都弹出其文本值 代码注意：1 . 为什么要写成 liNodes[i].onclick = funciton（）{xxxx} liNodes[i].onclick =XXXX; function hello() { alert(“hello”); } 如果我们是 liNodes[i].onclick = hello; 实际上是用的引...
JavaScript -- 练习，Dom 获取节点
kevin_xiang的专栏
11-25 803
无标题文档 function demo() { var divObj = document.getElementById("divid1"); //根据ID获取 divObj.style.backgroundColor = "red"; var parentNode = divObj.parentNode; //父节点 //getNodeInfo(parent
js之DOM练习题
weixin_30617797的博客
05-06 1188
<!DOCTYPE html> <html> <!-- 需求: 1.写三个按钮： 第一个全选 第二个取消全选 第三个反选 --> <head lang="en"> <meta charset="UTF-8"> <title&g...
JS DOM操作练习
qq_46266956的博客
01-09 572
JS和数学图像结合，dom操作练习 效果图如下 代码冗杂，功能也不太完善，还有很多缺点 <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> <input id="btnClick1" type="button" value="sin" onclick="sin1();sin2();"/> <inpu..
JS DOM练习例子02
一虹的博客
09-27 266
JS DOM练习例子021.1 实现一亮其他暗效果1.2 tab栏切换1.3 事件流使用1.4 图片随鼠标移动 1.1 实现一亮其他暗效果 利用排他思想实现 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>1</butto
js Dom简单练习题
weixin_30404405的博客
07-30 790
一、js Dom简单练习题 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /* #xianshi{ width: 100px; height: 100px; backg...
精通JavaScript编程：Eloquent JavaScript深度解析
该书被业界专家推荐，并以其独特的教学方式——将编程原理与实践相结合，通过编程故事和实例来教授JavaScript。全书共12章，涵盖了JavaScript的基础到高级主题，包括Web编程的相关知识。" 《JavaScript编程精解》...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值