JavaScript DOM可以做什么？

知数SEO

已于 2024-01-19 19:18:58 修改

阅读量535

点赞数 15

分类专栏： JavaScript Web专区文章标签： javascript 前端开发语言

于 2024-01-19 19:18:15 首次发布

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135705010

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Web专区

22 篇文章 0 订阅

订阅专栏

1、通过id获取标签元素

DOM是文档对象模型，它提供了一些属性和方法来方便我们操作document对象，比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素

// 用法
window.document.getElementById('id');
// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <h2 id="demo">知数SEO_专注搜索引擎优化和品牌推广</h2>
<script>
        var h2 = document.getElementById('demo');
        console.log(typeof(h2));
        console.log(h2);
</script>
</script>
</body>
</html>

2、操作标签元素的内容

使用DOM可以操作HTML标签元素，写出各种绚丽多彩的特效，最基本的就是操作标签元素的内容。步骤就是先找到要操作的标签元素，接下来对这个标签元素进行操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <h2 id="demo">知数SEO_专注搜索引擎优化和品牌推广</h2>
    <button onclick="update()">点击修改h2标签元素的显示内容</button>
<script>
        function update(){
            var h2 = document.getElementById('demo');
            h2.innerHTML = '这是修改后的内容';
        }
</script>
</body>
</html>

3、操作标签元素的属性

3.1 获取标签元素的属性

DOM不仅可以操作标签元素的内容还可以操作标签元素的属性。对象都是有属性和方法的，我们获取标签元素的属性的值可以使用element对象的getAttribute()方法，这个方法接受一个属性名，返回对象的属性值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <a id="demo" href="https://www.zhishunet.com">知数SEO_专注搜索引擎优化和品牌推广</a>
    <button onclick="getAttr()">点击获取a标签的href属性</button>
<script>
    function getAttr(){
        var obj_a = document.getElementById('demo');
        alert(obj_a.getAttribute('href'));
    }
</script>
</body>
</html>

3.2、修改标签元素的属性

我们可以获取标签元素的属性的值，也可以修改元素属性的值，DOM提供了setAttribute()方法修改标签元素属性的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <a id="demo" href="https://www.zhishunet.com">知数SEO_专注搜索引擎优化和品牌推广</a>
    <button onclick="getAttr()">点击获取a标签的href属性</button>
<script>
    function getAttr(){
        var obj_a = document.getElementById('demo');
        obj_a.setAttribute('href','http://www.zhishunet.cn');
    }
</script>
</body>
</html>

其实不仅可以对存在的标签属性的值进行修改，对于不存在的属性，我们可以添加并设置它的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <a id="demo">知数SEO_专注搜索引擎优化和品牌推广</a>
    <button onclick="getAttr()">点击获取a标签的href属性</button>
<script>
    function getAttr(){
        var obj_a = document.getElementById('demo');
        obj_a.setAttribute('href','http://www.zhishunet.cn');
    }
</script>
</body>
</html>

4、操作标签元素的css样式

操作标签元素的css样式我们需要使用标签元素的style属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <div id="demo" style="width:200px; height:400px;background-color:red;"></div><br>
    <button onclick="update()">点击修改样式</button>
<script>
    function update(){
        var obj_a = document.getElementById('demo');
        obj_a.style.backgroundColor = 'black';
    }
</script>
</body>
</html>

知数SEO

关注

15
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM可以做什么？

DOM是文档对象模型，它提供了一些属性和方法来方便我们操作document对象，比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素。使用DOM可以操作HTML标签元素，写出各种绚丽多彩的特效，最基本的就是操作标签元素的内容。我们可以获取标签元素的属性的值，也可以修改元素属性的值，DOM提供了setAttribute()方法修改标签元素属性的值。其实不仅可以对存在的标签属性的值进行修改，对于不存在的属性，我们可以添加并设置它的值。，这个方法接受一个属性名，返回对象的属性值。
复制链接

扫一扫