3JavaScript操作DOM对象

最新推荐文章于 2022-08-02 19:41:11 发布
最新推荐文章于 2022-08-02 19:41:11 发布
阅读量584 收藏
点赞数
分类专栏： 结构性学前端 文章标签： javascript html safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/computer408/article/details/123435281
版权


#JavaScript操作DOM对象

课件

1操作DOM

2节点和节点关系

3访问节点

使用getElement系列方法访问指定节点

getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点

节点信息

4操作节点

操作节点的属性

创建和插入节点

删除和替换节点

5操作节点样式

Style

className

获取元素的样式

6HTML中元素属性

7元素属性应用

总结

代码

示例1：文档结构

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>DOM节点</title>

</head>

<body>

<img src="images/fruit.jpg" alt="水果" id="fruit">

<h1>喜欢的水果</h1>

<p>DOM应用</p>

</body>

</html>

示例2：访问节点lastChild.firstChild.nextSibling

consloe.log()控制台输出

body,ul,li,div,section,header{margin: 0;padding: 0;}

ul,li{list-style: none;}

body{

    font-family: "微软雅黑";

    font-size: 12px;

    line-height: 28px;

}

#news{

    border: 1px solid #cccccc;

    width: 280px;

    overflow: hidden;

    margin: 5px auto 0 auto;

}

#news header{

    border-bottom: 1px solid #cccccc;

    font-size: 16px;

    line-height: 40px;

    padding-left:15px;

    color: #666666;

    font-weight: bold;

}

#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px; font-size: 12px;}

#news ul li{padding-left: 10px;}

#news ul li a{color: #686868; text-decoration: none; display: inline-block;}

#news ul li a:hover{color: #b02f4a;}

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>访问节点</title>

<link rel="stylesheet" href="css/newStyle.css">

</head>

<body>

<section id="news"><header>京东快报<a href="#">更多 > </a></header><ul><li><a href="#">志玲姐姐：墨镜300减30</a></li><li><a href="#">京东无锡馆正式启动</a></li><li><a href="#">99元抢平板！品牌配件199-100</a></li><li><a href="#">节能领跑京东先行</a></li><li><a href="#">高洁丝实力撩货，领券五折</a></li></ul></section>

<script>

    var obj=document.getElementById("news");

    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;

    var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;

    //var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;

    console.log(str);

</script>

</body>

</html>

示例3：节点信息.innerHTML

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>节点信息</title>

</head>

<body>

<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>

<script>

    var nodes=document.getElementById("nodeList");

    var type1=nodes.firstChild.nodeType;

    var type2=nodes.firstChild.firstChild.nodeType;

    var name1=nodes.firstChild.firstChild.nodeName;

    var str=nodes.firstChild.firstChild.nodeValue;

    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;

    document.getElementById("nodeList").nextSibling.innerHTML=con;

</script>

</body>

</html>

示例4：操作节点属性setAttribute

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>选择你喜欢的书</title>

    <style>

        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}

        div{padding: 5px; text-align: center;

        }

        div span{display: block;}

    </style>

</head>

<body>

<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>

<div><img src="" alt="" id="image" onclick="img()"><span></span></div>

<script>

    function book(){

        var ele=document.getElementsByName("book");

        var img=document.getElementById("image");

        if(ele[0].checked){

            img.setAttribute("src","images/dog.jpg");

            img.setAttribute("alt","我和狗狗一起活下来");

            img.nextSibling.innerHTML="我和狗狗一起活下来";

        }

        else if(ele[1].checked){

            img.setAttribute("src","images/mai.jpg");

            img.setAttribute("alt","灰霾来了怎么办");

            img.nextSibling.innerHTML="灰霾来了怎么办";

        }

    }

    function img(){

        var alt=document.getElementById("image").getAttribute("alt");

        alert("图片的alt："+alt)

    }

</script>

</body>

</html>

示例5：操作节点.appendChild 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>选择你喜欢的书</title>

    <style>

        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}

        div{padding: 5px; text-align: center;

        }

        div span{display: block;}

    </style>

</head>

<body>

<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>

<div></div>

<script>

    function book(){

        var ele=document.getElementsByName("book");

        var bName=document.getElementsByTagName("div")[0];

        if(ele[0].checked){

            var img=document.createElement("img");

            img.setAttribute("src","images/dog.jpg");

            img.setAttribute("alt","我和狗狗一起活下来");

            img.setAttribute("onclick","copyNode()")

            bName.appendChild(img);

        }

        else if(ele[1].checked){

            var img=document.createElement("img");

            img.setAttribute("src","images/mai.jpg");

            img.setAttribute("alt","灰霾来了怎么办");

            img.setAttribute("onclick","copyNode()")

            bName.appendChild(img);

        }

    }

    function copyNode(){

        var bName=document.getElementsByTagName("div")[0];

        var copy=bName.lastChild.cloneNode(false);

        bName.insertBefore(copy,bName.firstChild);

    }

</script>

</body>

</html>

示例6：删除和替换节点removeChild、replaceChild

自定义del、rep

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>删除和替换节点</title>

    <style>

        *{padding: 0; margin: 0; font-size: 14px;}

        ul,li{list-style: none;}

        li{float: left; text-align: center; width: 140px;}

    </style>

</head>

<body>

    <ul>

        <li>

            <img src="images/f01.jpg" id="first">

            <p><input type="button" value="删除我吧" onclick="del()"></p>

        </li>

        <li>

            <img src="images/f02.jpg" id="second">

            <p><input type="button" value="换换我吧" onclick="rep()"></p>

        </li>

    </ul>

<script>

    function del(){

        var delNode=document.getElementById("first");

        delNode.parentNode.removeChild(delNode);

    }

    function rep(){

        var oldNode=document.getElementById("second");

        var newNode=document.createElement("img");

        newNode.setAttribute("src","images/f03.jpg");

        oldNode.parentNode.replaceChild(newNode,oldNode);

    }

</script>

</body>

</html>

示例7：我的购物车.style

*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}

ul,li{list-style: none;}

#shopping{margin: 20px auto 0 auto; width: 320px;

}

#cart{

    background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;

    border: solid 1px #dcdcdc;

    float: right;

    width: 100px;

    height: 28px;

    padding-left: 45px;

    line-height: 28px;

    position: relative;

    cursor: pointer;

}

#cart span{

    position: absolute;

    color: #fff;

    background: #dc1742;

    display: block;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    top:-5px;

    right: 20px;

    font-size: 8px;

    line-height: 15px;

    text-align: center;

}

#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}

#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}

#cartList li{float: left;}

#cartList li:nth-of-type(1){width: 65px; text-align: center;}

#cartList li:nth-of-type(2){width: 155px;}

#cartList li:nth-of-type(3){text-align: center; width: 85px;}

#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0  5px;}

#cartList .footer span{padding: 0 12px;}

#cartList .footer span:nth-of-type(2){

    color: #fff;

    background: #dc1742;

    display: block;

    height: 25px;

    border-radius: 6px;

    float: right;

    text-align: center;

    font-weight: bold;

    margin-top: 5px;

}

#shopping .cartOver{

    background-color: #ffffff;

    z-index: 100;

    border-bottom: none;

}

#shopping .cartListOver{

    display:block;

    position:relative;

    top:-1px;

}

#shopping .cartOut{

    background-color:#f9f9f9;

    border-bottom:solid 1px #dcdcdc;

}

#shopping .cartListOut{

    display:none;

}

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>我的购物车</title>

    <link rel="stylesheet" href="css/shopping.css">

</head>

<body>

<section id="shopping">

    <div id="cart"  onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>

    <div id="cartList">

        <h2>最新加入的商品</h2>

        <ul>

            <li><img src="images/makeup.jpg"></li>

            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>

            <li>¥558.00×1<br/>删除</li>

        </ul>

        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>

    </div>

</section>

<script>

    function over(){

        document.getElementById("cart").style.backgroundColor="#ffffff";

        document.getElementById("cart").style.zIndex="100";

        document.getElementById("cart").style.borderBottom="none";

        document.getElementById("cartList").style.display="block";

        document.getElementById("cartList").style.position="relative";

        document.getElementById("cartList").style.top="-1px";

    }

    function out(){

        document.getElementById("cart").style.backgroundColor="#f9f9f9";

        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";

        document.getElementById("cartList").style.display="none";

    }

</script>

</body>

</html>

示例8：随鼠标滚动的广告图片.scrollTop

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

<title>随鼠标滚动的广告图片</title>

<style type="text/css">

#main{text-align:center; width:1014px; margin: 0 auto;}

#adver{

    position:absolute;

    left:10px;

    top:30px;

    z-index:2;

}

</style>

</head>

<body>

<div id="adver"><img src="images/adv.jpg"/></div>

<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>

<script>

    var adverTop; //层距页面顶端距离

    var adverLeft;

    var adverObj; //层对象

    function inix(){

        adverObj=document.getElementById("adver"); //获得层对象

        if(adverObj.currentStyle){

            adverTop=parseInt(adverObj.currentStyle.top);

            adverLeft=parseInt(adverObj.currentStyle.left);

        }

        else{

            adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);

            adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);

        }

    }

    function move(){

        var sTop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);

        var sLeft=parseInt(document.documentElement.scrollLeft||document.body.scrollLeft);

        adverObj.style.top=adverTop+sTop+"px";

        adverObj.style.left=adverLeft+sLeft+"px";

    }

    window.οnlοad=inix;

    window.οnscrοll=move;

</script>

</body>

</html>

Java_Eastlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2976
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
第三章 JavaScript操作和DOM对象
SHIYIYE_的博客
08-30 1670
1.简述DOM的分类和节点之间的关系？ 2.简述如何按层次关系访问节点？ 3.用什么方法获取节点的属性值 4.style属性和className在给便样式上有什么区别？ 如何改变浏览器地址栏中的网址？ 使用getElementBy~~()系列的方法可以获取带ID的页面元素？ 答：使用getElementByID; 使用setTimeout和setInterval方法实现时钟的特效区别...
jsp如何循环遍历html元素
看不过的黑工坊
11-09 2552
jsp代码块如下： for(int i=0;i       %>              " name="q_jpk_id" value=" "  />" name="q_cname" value=" " />        " name="q_relation" value=" "/>        " name="q_workunit"  value=" "/>  
通过层级关系访问元素节点
shixuerong的博客
08-02 364
代码】 通过层级关系访问元素节点。
节点访问关系
06-23
JavaScript节点访问关系
JavaScript操作DOM对象 Day05
01-08
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构！ 获取Dom节点：得到Dom节点 更新：更新Dom节点 添加：添加一个新的节点 删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 ...
Javascript操作dom对象之select全面解析
10-19
下面小编就为大家带来一篇Javascript操作dom对象之select全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript DOM 操作.doc
最新发布
01-15
创建方法：在IE中，可以使用以下代码创建一个DOM对象： ```javascript var oXmlDom = new ActiveXObject("Microsoft.XmlDom"); ``` 载入 XML 数据：在IE中，可以使用load方法从文件载入XML数据，默认采用异步方式。...
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
javascript学习基础笔记之DOM对象操作
01-19
这个API允许开发者通过编程的方式访问和修改页面的结构、内容和样式。DOM是一个与语言无关的标准，意味着它不仅仅适用于JavaScript，任何支持DOM的编程...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
Shopping_Cart:基本JavaScript购物车
04-27
购物车 基本JavaScript购物车 这是购物车的简单模拟，旨在证明我的参与度不高。 应用程序使用Northwind DB和Web服务，将数据转换为JSON格式并发布在页面上。 另外，有可能插入新产品。 该应用程序可用于基本的数学运算。
Java中如何引用文档对象模型_在JAVA中使用文档对象模型DOM经验小结
weixin_39973271的博客
02-27 119
文档对象模型 (DOM) 是一个文档标准，对于完备的文档和复杂的应用程序，DOM 提供了大量灵活性。DOM标准是标准的。它很强壮且完整，并且有许多实现。这是许多大型安装的决定因素--特别是对产品应用程序，以避免在API发生改变时进行大量的改写。以上是我在选择处理XML数据时之所以没有选择JDOM或者dom4j等其它面向对象的标准的原因，不过也由于DOM从一开始就是一种与语言无关的模型，而且它更趋向...
按层次关系访问结点
weixin_30600197的博客
11-16 1225
<script type="text/javascript"> function showNode( ){ var imgObj=document.getElementById("imgFruit"); var imgParent=imgObj.parentNode; alert(imgParent.nodeName); ...
（5）通过节点的层次关系获取节点对象：增删改查节点
FixedStar 的博客
08-06 1480
通过节点的层次关系获取节点对象 关系： 1，父节点：parentNode:对应一个节点对象 2，子节点：childNodes：对应一个节点集合 3，兄弟节点 上一个兄弟节点：previouesSibling 下一个兄弟节点：nextSibling* 除了求父节点，其他节点均要判断nodes[i] instanceof Element，否则会输出空白文本节点#text*
JavaScript操作DOM对象
jcvvs的博客
07-02 337
简述DOM的分类和节点间的关系 DOM分类：DOM Core(核心），HTML-DOM和CSS-DOM 节点之间的关系：最上面的节点为根节点，相邻的节点为兄弟节点，上一个节点为父节点，下一个节点为子节点。 简述如何按层次关系访问节点 使用节点属性和element属性。 节点属性 parentNode:返回节点的父节点 childNodes:返回字节的点的集合，childNodes[i]; firstChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 lastChild:返回节点的
JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
weixin_33814685的博客
06-14 135
利用节点间的层次关系获取节点： 上一节讲了3中获取的方式： * ※※一、绝对获取，获取元素的3种方式：—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签...
DOM07---通过节点的层次关系获取节点对象
奋斗、
05-30 2677
<!-- 通过节点的层次关系获取节点对象 关系： 1、父节点：parentNode属性 2、子节点：childNodes集合，获得全部子节点 3、兄弟节点： 上一个兄弟节点：previousSibling 下一个兄弟节点: nextSibling --> function getNodeByLevel() { var tabNode
Java二阶段 jquery
m0_45196258的博客
09-10 202
jquery 导入jquery: <script src="js/jquery-3.4.1.js"></script> 操作是批量操作 不需要循环操作 $("") $("#id") $(".class") $("element"):element是标签 基本选择器 :first :last 示例： $('li:first'); :odd :even 奇数 偶数 :gt(index) :lt(index) 索引值 从0开始 :eq(index) 内容： :contains
Dom-docment-通过节点层次关系获取
qq_34734520的博客
06-04 948
web-strom编写 1.通过节点层次关系获取 通过层次节点关系获取节点 function getNode(){ //获取页面中的表格节点 var tabNode=document.getElementById("a1"); //获取父节点 //
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值