JS操作DOM

最新推荐文章于 2023-04-08 13:33:33 发布

奇比翼凡

最新推荐文章于 2023-04-08 13:33:33 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/wyq1614406553/article/details/93899484

版权

JS操作DOM

什么是DOM：既Document Object Model（文档对象模型），DOM是一个使程序和脚本有能力动态访问和更新文档的内容，结构以及样式的平台和语言中立的接口。

DOM节点分为三大类：元素节点，属性节点，文本节点

在这里插入图片描述

<!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</a></li>
        <li><a href="">b</a></li>
        <li><a href="">c</a></li>
        <li><a href="">d</a></li>
        <li><a href="">e</a></li>
        <li><a href="">f</a></li>
    </ul>
</section>
<script>
    /*
    * console.log:用来调试打印对象，可以打印所有东西
    * document.write:只能写入Html元素
    * [object Text]:文本对象，无法直接写入网页中，会出现一个未定义
    * [object HtmlElement]:网页元素对象，可以直接调用innerHtml写入网页中
    *
    * */
    var obj=document.getElementById("news");
    console.log(obj);
    document.write(obj.innerHTML);




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

2.获取节点属性

<!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>CCCCCC</li>
</ul>
<script>

    function test() {
        var nodes=document.getElementById("NodeList");
        var typel=nodes.firstChild.nodeType;
console.log(typel);
var name=nodes.firstChild.nodeName;
console.log(name);
var value=nodes.firstChild.nodeValue;
console.log(value);

    }

</script>

<input type="button" onclick="test()" value="打印">
</body>
</html>

3.获得节点的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#" id="tt">123</a>
<script>
    var t=document.getElementById("tt").getAttribute("href");
    document.getElementById("tt").setAttribute("href","https://www.baidu.com");
    document.getElementById("tt").setAttribute("style","border:2px dashed yellow");
    console.log(t);

</script>


</body>

</html>

4.创建动态插入节点属性

<!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="superstar" onclick="people()">杜兰特
    <input type="radio" name="superstar" onclick="people()">詹姆斯
</p>
<div></div>
<script>

    function people() {
        var ele=document.getElementsByName("superstar")
        var ble=document.getElementsByTagName("div")[0];
if (ele[0].checked){
    var img=document.createElement("img");
    img.setAttribute("src","../images/1.jpg");
    img.setAttribute("alt","杜兰特");
    ble.appendChild(img);
}
        if (ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","../images/2.jpg");
            img.setAttribute("alt","詹姆斯");
            ble.appendChild(img);
        }
    }
    

</script>

</body>
</html>

5.替换和删除

<!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.jpg" alt="杜兰特" id="first">
        <p><input type="button" value="删除键" onclick="del()"></p>
    </li>
<li>
    <img src="../images/2.jpg" alt="詹姆斯" 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.jpg");
        oldImg.parentNode.replaceChild(newImg,oldImg);
    }
</script>

</body>
</html>

奇比翼凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS操作DOM

JS操作DOM什么是DOM：既Document Object Model（文档对象模型），DOM是一个使程序和脚本有能力动态访问和更新文档的内容，结构以及样式的平台和语言中立的接口。DOM节点分为三大类：元素节点，属性节点，文本节点<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫