DOM/事件高级
一、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>