javascript获取页面任意对象的值 javascript获取页面元素的方法

转载

技术极客之光 2023-08-20 09:08:40

文章标签 js javascript dom 前端 html 文章分类 JavaScript 前端开发

文章目录

获取元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

事件基础
操作元素

修改元素的内容
常见元素的属性操作
操作表单元素属性
操作样式属性

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM) 。
DOM就是一个编程接口，处理可扩展标记语言(HTML或XML)。通过DOM接口，可以改变网页的内容、结构和样式。
一个页面就是一个文档。用document表示。
页面中的所有标签就是元素，用element表示。
页面中的所有内容都可以看作是节点(标签、属性、文本和注释)，用node表示。

获取元素

根据ID获取

使用getElementById()的方法获取。注意括号中的参数需要是字符串。返回的是一个DOM element对象，如果没找到，则返回null。

注意需要以document开头。

<!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>Document</title>
</head>

<body>
    <div id="time">2021-08-07</div>
</body>
<script>
    var timer = document.getElementById('time') //注意：JS从上往下加载，所以先要有标签，在获取。所以JS要写在下方。
    console.log(timer);
    console.dir(timer);//打印返回的元素对象，可以查看里面的属性和方法。
</script>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_html

根据标签名获取

使用getElementsByTagName()方法，返回的是带有指定标签名的对象的集合。

括号中的参数是标签名，注意用字符串的格式。

如果没有这个标签，则返回一个空的伪数组。

<!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>Document</title>
</head>

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[1]);
        //用for循环来遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>
</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_dom_02

如果页面中不仅有ul还有ol；如果只想获取ul中的li标签，则需要设定父元素。父元素必须是单个对象。一般通过如下方法：

<!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>Document</title>
</head>

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <ol id="ol">
        <li>python1</li>
        <li>python2</li>
        <li>python3</li>
        <li>python4</li>
        <li>python5</li>
    </ol>
    <script>
        var getId = document.getElementById('ol')
        var lis = getId.getElementsByTagName('li');
        console.log(lis);
    </script>
</body>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_js_03

通过HTML5新增的方法获取

根据类名获取元素，document.getElementsByClassName(‘类名’)

<!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>Document</title>
</head>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var lis = document.getElementsByClassName('box')
        console.log(lis);
    </script>
</body>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_html_04

根据指定选择器返回第一个元素对象。document.querySelector(‘选择器’)。需要加符号。

<!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>Document</title>
</head>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var lis = document.getElementsByClassName('box')
        console.log(lis);
        //指定选择器，选择类型
        var firstBox = document.querySelector('.box')
        console.log(firstBox);
        //指定选择器，选择id
        var nav = document.querySelector('#nav')
        console.log(nav);
        //指定选择器，选择标签
        var li = document.querySelector('li')
        console.log(li);
    </script>
</body>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_javascript_05

上面的只能返回第一个元素对象，如果想返回全部的，应该使用**querySelectorAll()**函数。用法与上述相同。

特殊元素获取

获取body元素和html标签

<!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>Document</title>
</head>

<body>
    <script>
        //返回的是一个元素对象。
        var getBody = document.body
        console.log(getBody);

        var getHtml = document.documentElement
        console.log(getHtml);
    </script>
</body>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_dom_06

事件基础

事件是JavaScript可以监听的行为，是一种触发响应的一种机制。像点击事件、鼠标事件和键盘事件等。

事件是由三部分组成的，分别是事件源、事件类型和事件处理程序。

事件源是事件被触发的对象，像按钮。
事件类型，例如鼠标点击、鼠标经过、键盘按下触发。

<!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>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function() {
            console.log('按钮被点击');
        }
    </script>
</body>

</html>

javascript获取页面任意对象的值 javascript获取页面元素的方法_js_07

执行事件的步骤：

获取事件源，使用上述获取元素的方法。
绑定事件。btn.onclick
添加事件处理程序。

操作元素

操作元素首先要按照上述方法获取元素。

修改元素的内容

element.innerText：从起始位置到终止位置的内容，去除html标签，同时空格和换行也去掉。
element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。推荐使用。

<!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>Document</title>
</head>

<body>
    <!-- 点击按钮 将当前的时间显示到div中去 -->
    <button id="btn">按钮</button>
    <div>某个时间</div>
    <script>
        var btn = document.getElementById('btn')
        var div = document.querySelector('div')
        btn.onclick = function() {

            div.innerText = new Date()

        }
    </script>
</body>

</html>

常见元素的属性操作

src、href、title等。
案例：点击按钮2改变图片

<!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>Document</title>
</head>

<body>
    <button id="pic1">按钮1</button>
    <button id="pic2">按钮2</button>
    <img src="https://hao1.qhimg.com/t01ea3a44e231e5d6f4.png" alt="">
    <script>
        var pic1 = document.querySelector('#pic1')
        var pic2 = document.querySelector('#pic2')
        var img = document.querySelector('img')

        pic2.onclick = function() {
            img.src = 'https://pic3.zhimg.com/v2-12e0d5c340b583f8895afcf88c8db14e_is.jpg'
        }
    </script>
</body>

</html>

操作表单元素属性

如果想修改表单中的内容，可以通过value属性进行修改。
使用dom可以操作type、value、checked、selected、disabled这些表单元素的属性。

<!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>Document</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="请输入内容">
    <script>
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        btn.onclick = function() {
            //表单中的值是通过value来修改的。
            input.value = '内容发生变化'
            //如果想要一个表单不能再点击
            btn.disabled = true
            //除了这种写法，还可以写为this.disabled=true,this指的是事件函数的调用者。
        }
    </script>
</body>

</html>