DOM学习总结

最新推荐文章于 2024-07-18 21:11:52 发布

qq_54424733

最新推荐文章于 2024-07-18 21:11:52 发布

阅读量318

点赞数 10

文章标签：学习前端

本文链接：https://blog.csdn.net/qq_54424733/article/details/136119166

版权

针对上面3、html DOM，做出详解：

打开W3C js的参考书，以<a>标签为例：

总体思路：1、获取html元素对象。2、操作该元素对象的属性或者方法，从而改变该元素的文本内容（具体调用的属性和方法参考W3C）

重点介绍第一步（获取html元素对象）：

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document对象中提供了以下获取Element对象的函数：

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size: 30px; text-align: center;" id="tb1">课程表</div>
    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center" class="data">
            <th>001</th>
            <th>里斯</th>
            <th>99</th>
            <th>优秀</th>
        </tr>
        <tr align="center" class="data">
            <th>002</th>
            <th>张三</th>
            <th>99</th>
            <th>优秀</th>
        </tr><tr align="center" class="data">
            <th>003</th>
            <th>完给</th>
            <th>99</th>
            <th>优秀</th>
        </tr>
    </table>
    <br>
    <div style="text-align: center;">
        <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
        <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
        <input id="b3" type="button" value="删除最后一行" onclick="fn3()">
    </div>
</body>
<script>
    function fn1(){
        document.getElementById('tb1').innerHTML="学员成绩表"
    }
    function fn2(){
        document.getElementById('tb1').style="font-size:30px; text-align:center; color:red"
    }
    function fn3(){
        var trs = document.getElementsByClassName('data');
        trs[trs.length-1].remove();
    }
    
    //获取html对象
    //1、id
    // var div = document.getElementById('tb1');
    // alert(id);


    //2、根据name属性获取

    
    //3、标签获取
    var ths = document.getElementsByTagName('th');
    for (let i = 0; i < ths.length; i++) {
        alert(ths[i]) ;
    }

    //4、根据class属性获取
    // var trs = document.getElementsByClassName('data');
    // for (let i = 0; i < trs.length; i++) {
    //     alert(trs[i]) ;
    // }
</script>
</html>