python - dom节点获取、节点元素层级关系、修改_清空内容、隐藏显示密码效果、全选，反选，不选，js控制css属性、js事件、模态框

hdh1324

512人浏览 · 2025-09-08 14:58:05

hdh1324 · 2025-09-08 14:58:05 发布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM document object model 文档顶级节点</title>
</head>
<body>
<div id="box">
<p class="p1" >张三</p>
<p class="p2">李四</p>
<p class="p3">赵刘</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>

<div>
<input type="text" name="username" />
<input type="password" name="pwd" />

<p1>112233</p1>
<box>55666</box>
</div>

<script>
console.log(document)
// ### 1 通过id获取div节点对象
var box = document.getElementById("box");
console.log(box);

// ### 2 通过类名获取节点对象 [返回的是数组]
var p2 = document.getElementsByClassName("p2");
console.log(p2 , typeof(p2));
// 获取李四节点对象
lisi = p2[0];
console.log(lisi)
// 获取王五节点对象
wangwu = p2[1];
console.log(wangwu);

// ### 3.通过标签获取节点对象 [返回的是数组]
var p = document.getElementsByTagName("p");
console.log(p)
console.log(p[1])

// ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中
var ceshi1 = document.getElementsByName("username")[0];
console.log(ceshi1);

// ### 通过css选择器获取对应的元素节点
// ### 5.querySelector ,只获取找到的第一个;
var p1 = document.querySelector(".p1");
console.log(p1)
var box = document.querySelector("#box");
console.log(box)
// input表单有两个,但是只获取第一个;
var input = document.querySelector("input");
console.log(input);
// ### 6.querySelectorAll 获取所有找到的元素节点,返回数组
var all = document.querySelectorAll("input[name=username]")[0];
console.log(all);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点元素层级关系</title>
</head>
<body>
<div id="box">
<p>
<input type="text" name="username" />
<input type="password" name="pwd" />
</p>
<p class="p1" >张三</p>
<p class="p2">李四</p>
<p class="p3">赵刘</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>
<script>

// ### 获取对应的节点元素
console.log(document)
console.log(document.documentElement); // html
console.log(document.documentElement.children)
// 找html里面所有的子节点children
var html_children = document.documentElement.children
console.log(html_children) // head , body
body = html_children[1];
console.log(body); // head , body
var div = body.children[0]
console.log(div);
var p0 = div.children[0]
console.log(p0)
var input = p0.children
console.log(input)
var input1 = input[0]
console.log(input1)
// 获取下一个节点对象nextSibling
console.log(input1.nextSibling.nextSibling);
// 获取下一个元素节点对象 nextElementSibling
var input2 = input1.nextElementSibling;
console.log(input2);
// 获取上一个节点对象 previousSibling
console.log(input2.previousSibling)
// 获取上一个元素节点对象 previousElementSibling
console.log(input2.previousElementSibling)
// 获取input2父节点元素对象;
console.log(input2.parentElement)
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 修改/清空内容</title>
</head>
<body>
<button onclick="func1()">修改内容</button>
<button onclick="func2()">清空内容</button>
<div id="box" style="border:solid 1px red;">
<p>我是最帅的最有钱的<a href="#">最有味的</a>男人</p>
</div>
<script>
// innerHTML 获取标签里面所有内容 [标签 + 文本]
// innerText 获取标签里面所有字符串[文本]
var p = document.querySelector("#box p");
// console.log把数据展现在控制台
console.log(p);
// document.write 把数据以字符串的形式展现在浏览器
document.write(p);

// 点击button1触发如下任务 , 修改
function func1(){
var content = p.innerHTML;
var content = p.innerText;
console.log(content);
// p.innerHTML = `我被修改了 <a href=''>点我中大奖</a>...1`;
p.innerText = `我被修改了 <a href=''>点我中大奖</a>...2`;
}

// 点击button2触发如下任务 , 清空
function func2(){
p.innerHTML = '';
}

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐藏显示密码效果</title>
</head>
<body>
<input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button>

<div>
<img src="images/oneal1.jpg" />
</div>


<script>

// 效果1: 显示隐藏密码
var password = document.querySelector("input[name=pwd]")
console.log(password);
console.log(password.type);
console.log(password.name);
console.log(password.value);
console.log(password.className)

function change(){
var btn = document.querySelector("#btn")
console.log(btn);
if(password.type=="password"){
password.type = "text";
btn.innerHTML = "点我隐藏密码";
}else{
password.type= "password";
btn.innerHTML = "点我显示密码";
}
}

// 效果2:点击换图片
var img = document.querySelector("img");
console.log(img)
img.onclick = function(){
console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
var arr = img.src.split("/")
imgname = arr[arr.length - 1]
console.log(arr , imgname);

if(imgname == "oneal1.jpg"){
img.src = "images/bakeli.jpg";
}else{
img.src = "images/oneal1.jpg";
}

}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选,反选,不选</title>
<style>
*
{margin:0px;padding:0px;}
ul
{list-style: none;}
#ul1 li
{float:left;}
#ul1 li button
{width:80px;height:30px;}
#ul1 li button:hover
{background-color: tan;}
#ul2
{clear:both;}

</style>
</head>
<body>

<ul id="ul1">
<li><button>全选</button></li>
<li><button>不选</button></li>
<li><button>反选</button></li>
</ul>
<ul id="ul2">
<li><input type="checkbox" /> 看电影 </li>
<li><input type="checkbox" /> 吃面 </li>
<li><input type="checkbox" /> 烫头 </li>
<li><input type="checkbox" /> 跑步 </li>
<li><input type="checkbox" /> 篮球 </li>
</ul>

<script>

// 获取btn节点对象
var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
// 全选
btn1.onclick = function(){
// 获取#ul2 li 里的input
/*
var data_lst = document.getElementById("ul2").getElementsByTagName("input");
console.log(data_lst)
*/
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
//console.log(input.checked)
// 设置节点input的checked属性为true;
input.checked = true;
}
}

// 不选
btn2.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
//console.log(input.checked)
// 设置节点input的checked属性为true;
input.checked = false;
}
}

// 反选
btn3.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
if(input.checked === true){
input.checked = false;
}else{
input.checked = true;
}
}
}

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js事件</title>
<style>
*{margin:0px;padding:0px;}
.box
{width:100px;height:100px;background: green;position: absolute;left:0px;}
</style>
</head>
<body>

<button onclick="func1()">按钮1</button>
<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
var t;
console.log(box);
function func1(){
var left = parseInt(window.getComputedStyle(box).left)
console.log(left ,typeof(left));
// console.log(box.style.left);
t = setInterval(function(){
left += 10;
box.style.left = `${left}px`;
} , 50)
}

// 2.事件的动态绑定
// onmouseover 鼠标指针悬停在指定元素上时触发
box.onmouseover = function(){
clearInterval(t);
}
// onmouseout 鼠标指针离开指定元素时触发
box.onmouseout = function(){
func1()
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<style>
.box {
position:fixed;
width:100%;
height:100%;
top:0px;
background-color: greenyellow;
display: none;
}

.content
{
border:solid 1px red;
width:500px;
height:500px;
background-color:tan;
margin:auto;
margin-top:14%;
}

</style>
</head>
<body>
<button id="login">登录</button>
<div class="box">
<div class="content" >
<span class="close">X</span>
<br />
<span>账号: <input type="text" /></span>
<br / >
<span>密码: <input type="password" /></span>
</div>
</div>

<script>
var btn = document.getElementById("login");
var box = document.querySelector(".box");
var close = document.querySelector(".close");
btn.onclick = function(){
console.log(11)
box.style.display = "block";
}
close.onclick = function(){
box.style.display = "none";
}

</script>
</body>
</html>

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责