文章目录

  • 获取元素
  • 根据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获取页面元素的方法_前端

根据标签名获取

使用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获取页面元素的方法_js_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获取页面元素的方法_javascript_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获取页面元素的方法_dom_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获取页面元素的方法_dom_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获取页面元素的方法_js_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获取页面元素的方法_dom_07


执行事件的步骤:

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

操作元素

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

修改元素的内容

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>

操作样式属性

通过JavaScript修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
element.className 类名样式操作,样式很多的时候使用。