前端：javaScript之操作DOM对象

最新推荐文章于 2024-03-09 08:45:00 发布

dream_Felix

最新推荐文章于 2024-03-09 08:45:00 发布

阅读量144

点赞数

文章标签： java 学习

本文链接：https://blog.csdn.net/yalu_123456/article/details/93618352

版权

操作DOM对象

DOM

DOM : Document Object Model ( 文档对象模型 )

节点和节点的关系

在这里插入图片描述

访问节点

使用getElement系列方法访问指定节点
getElementById()
getElementsByName()
getElementsByTagName()
根据层次关系访问节点
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<section id="news">
    <header>西开喜报</header>
    <ul>
        <li><a href="">恭喜A:获得阿里巴巴offer</a></li>
        <li><a href="">恭喜B:获得阿里巴巴offer</a></li>
        <li><a href="">恭喜C:获得阿里巴巴offer</a></li>
        <li><a href="">恭喜D:获得阿里巴巴offer</a></li>
        <li><a href="">恭喜E:获得阿里巴巴offer</a></li>
        <li><a href="">恭喜F:获得阿里巴巴offer</a></li>
    </ul>
</section>

<div id="msg"></div>

<script>


    //获取所有元素
    var info = document.getElementById("news").lastElementChild.firstElementChild.firstElementChild;
    console.log(info);
    document.write(info.innerHTML);
    /*
    console.log : 用来调试打印对象 . 可以打印所有东西
    document.write : 只能写入Html元素

    [object Text] : 文本对象 , 无法直接写网页中 , 会出现一个未定义 .
    [object HTMLElement] : 网页元素对象,可以直接调用innerHtml写入网页 .
    * */




    /*

    //获取子元素
    var ulInfo = document.getElementById("news").lastElementChild.firstElementChild.innerHTML;
    console.log(ulInfo);
    document.write(ulInfo);

*/

</script>



</body>
</html>

节点属性

在这里插入图片描述

element属性

在这里插入图片描述

节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="NodeList">
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>BBBBBB</li>
</ul>

<script>

    //var zhi = document.getElementById("NodeList").firstChild.nextSibling;


    var res = document.getElementById("NodeList").firstChild;
    console.log(res.nodeType);


</script>




</body>
</html>

操作节点

操作节点的属性
创建和插入节点
删除和替换节点
操作节点样式
获取元素的样式

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=""></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>


<a href="#" id="tt" style="">啊啊啊啊啊啊~</a>

<script>

    /*
    //获取到元素
    var t = document.getElementById("tt").getAttribute("href");
    document.getElementById("tt").setAttribute("href","https://www.baidu.com");
    var t = document.getElementById("tt").getAttribute("href");
    */
    document.getElementById("tt").setAttribute("href","https://www.baidu.com");
    document.getElementById("tt").setAttribute("style","border: 10px dashed black");

    console.log(tt);

</script>



</body>
</html>

创建和插入节点

在这里插入图片描述
案例;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            font-size: 20px;
            font-family: "微软雅黑";
            line-height: 30px;
        }
        div{
            padding: 5px;
            text-align: center;
        }

    </style>

</head>
<body>

<p> 选择你喜欢的书 :
    <input type="radio" name="book" onclick="book()">剑指Offer
    <input type="radio" name="book" onclick="book()">深入理解Java虚拟机
</p>
<div></div>

<script>

    //console.log(ele);
    //console.log(bName);
    /*操作节点*/

    function book() {
        /*获取节点信息*/
        var ele = document.getElementsByName("book");
        var bName = document.getElementsByTagName("div")[0];
        //console.log(ele);
        if (ele[0].checked){
            // 动态创建一个节点
            var img = document.createElement("img");
            // 需要给节点设置属性
            img.setAttribute("src","images/1.png");
            img.setAttribute("alt","剑指Offer");
            // 给他安排一个位置
            bName.appendChild(img);
        }
        if (ele[1].checked){
            var img = document.createElement("img");
            img.setAttribute("src","images/2.png");
            img.setAttribute("alt","深入理解Java虚拟机");
            bName.appendChild(img);
        }


    }







</script>



</body>
</html>

删除和替换节点

在这里插入图片描述

var delNode=document.getElementById(“first”);
delNode.parentNode.removeChild(delNode);
var oldNode=document.getElementById(“second”);
var newNode=document.createElement(“img”);
newNode.setAttribute(“src”,“images/f03.jpg”);
oldNode.parentNode.replaceChild(newNode,oldNode);
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            padding: 0px;
            margin: 0px;
            font-size: 20px;
        }
        ul li{
            list-style: none;
        }
        li{
            float:left;
            text-align: center;
        }

    </style>

</head>
<body>

<ul>

    <li>
        <img src="images/1.png" alt="剑指Offer" id="first">
        <p><input type="button" value="删除我" onclick="del()"></p>
    </li>
    <li>
        <img src="images/2.png" alt="深入理解Java虚拟机" id="second">
        <p><input type="button" value="替换我" onclick="rep()"></p>
    </li>

</ul>

<script>

    function del() {
        var delImg = document.getElementById("first");
        delImg.parentNode.removeChild(delImg);
    }

    function rep() {
        var oldImg = document.getElementById("second");
        var newImg = document.createElement("img");
        newImg.setAttribute("src","images/1.png");
        oldImg.parentNode.replaceChild(newImg,oldImg);
    }
</script>






</body>
</html>

style属性

语法
HTML元素.style.样式属性＝"值"
document.getElementById(“titles”).style.color="#ff0000";
document.getElementById(“titles”).style.fontSize="25px ";

className属性

语法
HTML元素.className=“样式名称”

function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}