DOM/事件高级

最新推荐文章于 2026-06-21 21:49:12 发布

原创最新推荐文章于 2026-06-21 21:49:12 发布 · 300 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #html

一、DOM

1、如何获取页面元素

（1）根据ID获取

var x=document.getElementById("main");

（2）根据标签名获取

var y=x.getElementsByTagName("p");

父元素必须是单个对象（必须指明是哪一个元素对象）

var ol = document.getElementById('ol');

console.log(ol.getElementsByTagName('li'))

（3）通过HTML5新增方法获取

document.getElementByClassName('类名')
querySelector 返回指定选择器的第一个元素对象 ,类：.box；id:#nav;标签直接写

如：document.querySelector('#nav')

querySelectorAll 返回指定选择器的所有元素对象集合

（4）获取body元素

document.body; //返回body元素对象

document.documentElement; //返回html元素对象

2、事件基础

事件三要素：事件源、事件类型、事件处理程序

<body>
    <button id='btn'>唐伯虎</button>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            var str = 'pink老师真的好可爱'
            var o = {}
            for (var i = 0; i < str.length; i++) {
                var chars = str.charAt(i) // chars是字符串的每一个字符
                if (o[chars]) { // o[chars]得到的是属性值
                    o[chars]++
                } else {
                    o[chars] = 1
                }
            }
            console.log(o)
        }
    </script>
</body>

3、操作元素

(1)改变元素内容

element.innerText 去除html标签同时空格和换行也会去掉

element.innerHtml 包括html 同时保留空格和换行用的多

<body>
    <button>显示当前时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        // 2.修改元素的内容
        btn.onclick = function () {
            div.innerText = '2025-07-22';
        }
        //元素可以不添加事件

        var p = document.querySelector('p');
        p.innerText = '2025-07-23';
    </script>
</body>