DOM（3）节点案例

最新推荐文章于 2022-09-22 21:40:33 发布
最新推荐文章于 2022-09-22 21:40:33 发布
阅读量249 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youguang_/article/details/84668456
版权 
(case 1)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 300px;
            height: 400px;
            border: 2px dotted red;
        }
    </style>
</head>
<body>
<!--====================通过节点操作元素的背景颜色=============-->
    <input type="button" value="按钮" id="btn">
    <div id="div1">
        <p>我是p</p>
        <span>我是span</span>
        <p>我是p</p>
        <span>我是span</span>
        <p id="p1">我是p</p>
        <span>我是span</span>
        <a href="#">baidu</a>
    </div>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            // 先获取div
            var divObj = my$("div1");
            // 获取里面所有的子节点
            var nodes = divObj.childNodes;
            // 循环遍历所有的字节点
            for (var i=0;i<nodes.length;i++){
                // 判断这个子节点是不是p标签
                if (nodes[i].nodeName == "P" && nodes[i].nodeType == 1) {
                    nodes[i].style.backgroundColor = "red";
                }
            }
        }
    </script>
</body>
</html>

(case 2)

<!--====================通过节点操作元素的背景颜色=============-->
    <input type="button" value="按钮" id="btn">
    <ul id="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            // 记录有多少个li
            var count = 0;
            // 获取ul中所有子节点
            var nodes = my$("uu").childNodes;
            //循环遍历每个子节点
            for (var i=0;i<nodes.length;i++){
                // 判断这个节点是不是li标签
                if (nodes[i].nodeType== 1 && nodes[i].nodeName == "LI"){
                    nodes[i].style.backgroundColor = count%2==0?"red":"yellow";
                    count++;
                }
            }
        }
    </script>

（case 3）<!--====================通过节点操作元素的背景颜色=============-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--====================通过节点操作元素的背景颜色=============-->
    <input type="button" value="按钮" id="btn">
    <ul id="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            // 记录有多少个li
            var count = 0;
            // 获取ul中所有子节点
            var nodes = my$("uu").childNodes;
            //循环遍历每个子节点
            for (var i=0;i<nodes.length;i++){
                // 判断这个节点是不是li标签
                if (nodes[i].nodeType== 1 && nodes[i].nodeName == "LI"){
                    nodes[i].style.backgroundColor = count%2==0?"red":"yellow";
                    count++;
                }
            }
        }
    </script>
</body>
</html>
_有光
关注
实例解读DOM结点操作
杜小白的博客
05-31 503
  DOM提供了丰富的方法来支持对结点的基本操作，即创建、添加、修改和删除结点。一、创建元素结点document.createElement('div'); //创建一个div元素  当使用createElement方法创建元素后，元素并没有被立即加入到当前的DOM树中，而是被存放在内存中。只有在使用添加结点的相关方法进行操作，才能真正将元素加入DOM树中。二、创建文本节点  使用createTe...
获取和操作 DOM 节点
最新发布
2401_82968855的博客
06-22 1916
获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：返回对拥有指定 id 的第一个对象的引用。element.getElementById 是指去 element 节点下根据 id 查找子节点。通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。实例演示预览复制。
节点操作案例
weixin_42303695的博客
07-08 201
改变字体颜色和大小 html+css <body> <div id="div1"> 节点操作案例 </div> </body> #div1{width: 400px;height: 200px;border: 1px black solid;margin: 40px auto;text-align: center;font-size: 18px;line-height: 200px;} 随机颜色的函数 function randomCol
DOM节点操作案例
weixin_54418006的博客
01-12 332
1. 新浪下拉菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
JS-DOM 节点（简单留言案例）
maohe的博客
09-22 504
通过节点关系（父子兄）的方式获取元素，动态创建，添加和删除节点元素。***微博简单下拉框案例*** || ***简单留言功能案例***
jQuery移动和复制dom节点实用DOM操作案例
10-27
本文将详细介绍jQuery中移动和复制DOM节点的实用案例。 首先，我们需要了解在jQuery中如何进行节点的移动操作。节点的移动可以通过多种内部和外部插入方法来实现，例如：append(), appendTo(), prepend(), ...
vue监听dom大小改变案例
10-15
本文档详细介绍了Vue中如何监听DOM元素大小的变化，尤其当DOM元素的宽度发生变化时，如何通过特定的监听器来响应这些变化。文档中提出了一种常见的Web界面布局问题，即左边的菜单栏缩小，而右边内容区域的宽度需要...
DOM节点操作
m0_64749865的博客
08-29 374
DOM节点操作
DOM 复制节点案例
weixin_34319640的博客
11-25 88
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function copyDiv(flag){ var divNode=doc...
DOM操作之节点
loveDingDang_的博客
12-15 158
一、DOM树概念 DOM以树状结构出现的，方便开发人员获取，添加，删除和修改页面上的某一部分 二、DOM节点的概念 根据w3c，页面中的每一个部分都是一个节点， 三、DOM节点的种类 元素节点------- (标签：元素节点: nodeType 1) 属性节点--------(属性：属性节点： nodeType 2) 文本节点---------(文本：文本节点： nodeType 3) 注释节点--------(注释：注释节点： nodeType ...
DOM——操作节点样式（案例）
lmyh1111的博客
08-27 310
改变样式属性： style属性 语法：HTML元素.style.样式属性=“值”； 类别 属性 文本 fontSize、fontWright、textAligh、color...... 边距 padding、paddingTop、paddingBottom、paddingRight、paddingLeft 背景 backgroundColor、backgr...
DOM总结（三）及综合案例
03-17 237
DOM总结（三）及综合案例 1，DOM属性-----replaceChild()     replaceChild()---替换节点: 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild);     返回值是一个指向已被替换的那个子节点的引用指针。     如果被插入的子节...
javascript学习笔记5：dom的节点，星星案例2，
shanshuisheng的博客
07-08 235
1.dom  描述网页各个组成部分之间的关系。注：火狐浏览器中空白处也算一个节点在 XML DOM 中，节点的关系被定义为节点的属性：parentNode childNodes firstChild lastChild nextSibling previousSibling 下面的图像展示了 books.xml 中节点树的一个部分，并说明了节点之间的关系：dom节点练习：&lt;!DOCTYPE ...
DOM的节点及案列
APPTX4869的博客
12-14 143
什么叫节点： w3c，页面上所有的内容都可以称为节点，DOM的最小单元就是节点 (标签：元素节点: nodeType 1)****** (属性：属性节点： nodeType 2) (文本：文本节点： nodeType 3) (注释：注释节点： nodeType 8) ...
DOM 节点操作 【微重点】【案例】
egg_er的博客
11-29 841
节点（node） 前面我们聊到，一篇DOM就够了章节，我们掌握了常用的操纵元素方法…接下里我们聊聊节点是如何高效操作的… 那么什么是节点呢？(都有哪些类型，以及如何判断) 其实页面上的所有看得到的，看不到的：都叫节点，看不到的这里举个栗子（换行,元素的属性等）。 这么多节点，那一定有分类了，那你猜对了;确实有：并且分为1号标签节点，2号属性节点，3号文本节点；为什么有1.2.3号呢？这个是程序之初设置好的，我们可以这么理解，1就代表标签节点，2就代表… 3就代表文本节点… 如果我们获取的节点，不知道是什么
074|节点操作实例
weixin_43846020的博客
08-05 186
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>074节点操作实例</title> <style> #div1{width:400px;height: 100px;background-color: orange;} #div2{width:400px;height: 500px;background-color: peachp
节点操作及案例完整版（内含解析）
m0_59505309的博客
06-28 206
节点操作及案例完整版（内含解析）
Zookeeper 创建6种的节点实例
pengweismile的专栏
04-05 6442
Zookeeper是Apache Hadoop的一个子项目，它主要用来解决分布式系统中经常遇到的一些数据管理问题，例如，统一命名，状态同步，集群管理，分布式应用配置管理。 Zookeeper的定位，这个动物园的管理者，如下图 Zookeeper又2个特性 特性一树形结构，每个子目录可以被增加删除 特性二 事件监听机制 特性一 zookeeper可以对目录树中的任意一个节点进行监听。监听是只监听目录下面的目录变化。 zookeeper类似一个文件系统，每个子目录被称为目录节点，允许我们自..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值