JavaScript----DOM文档对象模型（上）

最新推荐文章于 2024-07-12 16:27:40 发布

小满blue

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量40

点赞数

分类专栏： JavaScript入门文章标签： javascript html html5

本文链接：https://blog.csdn.net/taozi8957/article/details/120678743

版权

JavaScript入门专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1.document对象

document属性：title

document.title='内容' //设置title的内容

示例：实现title变换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>★☆★Javascript学习网★☆★</title>
</head>
<body>
    <script>
        var isShow = true
        setInterval(function () {
            if (isShow) {
                document.title = '★☆★Javascript学习网★☆★'
                isShow = false
            } else {
                document.title = '☆★☆Javasctipt学习网☆★☆'
                isShow = true
            }
        }, 100)    //间隔100毫秒换title的内容
        document.write('DOM 文档对象模型学习')
    </script>
</body>

</html>

2.获取html元素

（1）getElement系列

getElementById('id属性值') //返回dom节点

getElementsByClassName('classs属性') //返回伪数组

getElementsByTagName('标签名') //返回伪数组

getElementsByName('name属性') //返回伪数组

（2)querySeletor系列

querySelector(' ') //返回第一个满足条件的元素

querySelectorAll(' ') //返回所有满足条件的元素，为伪数组

伪数组：

可以通过索引号访问里面的元素，可进行遍历；
可以使用length属性获取元素个数；
不能使用数组的所有方法，例如push等

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取html元素</title>
</head>

<body>
    <div id="d1" class="c1">元素一</div>
    <div id="d2" class="c1">元素二</div>
    <h2 class="c1">标题</h2>
    <input type="text" name="username">

    <script>
        //=================querySelector系列==========
        // var divEle = document.querySelector('#d1')
        // var divEle = document.querySelector('.c1')
        // var divEle = document.querySelector('div')
        var divEles = document.querySelectorAll('.c1')
        for (var i = 0; i < divEles.length; i++) {
            // console.log(divEles[i])
        }

        var inputEle = document.querySelector('input[name="username"]')
        console.log(inputEle)

        //=================getElement系列============
        var divEle = document.getElementById('d1') //获取id值为d1的html元素,  将获取到的html元素称为 DOM节点对象
        // console.log(divEle)    

        var divEles = document.getElementsByTagName('div') // 根据标签名获取html元素， 返回的是一个数组(伪数组)     
        for (var i = 0; i < divEles.length; i++) {
            // console.log(divEles[i])
        }

        var divClassEles = document.getElementsByClassName('c1')
        for (var i = 0; i < divClassEles.length; i++) {
            // console.log(divClassEles[i])
        }

        var divNameEles = document.getElementsByName('username')
        // console.log(divNameEles[0])
    </script>
</body>

</html>

3.操作元素内容

innerHTML 设置元素的内容
innerText 设置元素的内容，与innerHtml相比，它不能识别标签，直接将标签输出
value 设置表单元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素内容</title>
   
</head>
<body>
    <div id="d1">元素一</div>
    <input type="text" name="message">

    <button onclick="onChangeMessage()">更改内容</button>
    <button onclick="getFormContent()">表单元素内容</button>
    <button onclick="setFormContent()">设置表单元素内容</button>

    <script>
        // 获取id为d1的元素内容，打印到控制台
        var divEle = document.querySelector('#d1')
        // console.log( divEle.innerHTML )
        console.log( divEle.innerText )

        function onChangeMessage(){
            divEle.innerHTML = '<span style="color:blue;">价格</span>'
            // divEle.innerText = '<span style="color:red;">价格</span>'
        }

        var inputEle = document.querySelector('input')
        function getFormContent(){
            alert(inputEle.value) 
        }
        function setFormContent(){
           inputEle.value = 'root管理员' 
        }
    </script>
</body>
</html>

小满blue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript----DOM文档对象模型（上）

1.document对象document属性：titledocument.title='内容' //设置title的内容示例：实现title变换效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met...
复制链接

扫一扫