JavaScript DOM可以做什么？

news2024/11/15 19:44:06

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>