Web API---DOM---点击操作---节点的方式---案例
2021-01-26 03:14
标签：style des function meta web api == ack 子节点 btn Web API---DOM---点击操作---节点的方式---案例 标签：style des function meta web api == ack 子节点 btn 原文地址：https://www.cnblogs.com/jane-panyiyun/p/11993895.html点击操作---节点的方式---案例
案例1：点击按钮,设置p变色---节点的方式做
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>titletitle>
style>
div {
width: 200px;
height: 200px;
border: 1px solid hotpink;
}
style>
head>
body>
input type="button" value="变色" id="btn" />
div id="dv">
p>锄禾日当午p>
p>汗滴禾下土p>
span>谁知盘中餐span> br />
span>粒粒皆辛苦span> br />
a href="#">唐诗宋词a>
div>
script src="common.js">script>
script>
my$("btn").onclick = function () {
//先获取div
var dvObj = my$("dv");
//获取里面所有的子节点
var nodes = dvObj.childNodes;
//循环遍历所有的子节点
for (var i = 0; i nodes.length; i++) {
//判断这个子节点是不是p标签, nodetype是1且nodename是大写的P
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "pink";
}
}
};
script>
body>
html>
文章标题：Web API---DOM---点击操作---节点的方式---案例
文章链接：http://soscw.com/index.php/essay/47087.html