一.获取元素 1.根据ID获取元素,getElementById()返回一个匹配特定 ID的元素,如果当前文档中拥有特定 ID 的元素不存在则返回 null。
<div id="purse">2022-8-1</div>
<span id=""></span>
<script>
var id = document.getElementById('purse');
console.log(id);
</script>
2.根据标签名获取元素，getElementsByTagName()，返回一个包括所有给定标签名称的元素的 HTML 集合，返回的 HTML 集合是动态的。
var ch = document.getElementsByTagName('li');
console.log(ch); //获取对象的集合 以伪数组的形式
console.log(ch[0]);
//依次获取元素对象采用遍历的方式
for(var i = 0; i < ch.length; i++){
console.log(ch[i]); //得到的是动态的
}
//如果页面中只有一个li，返回的还是伪数组的形式
//如果页面元素没有这个元素返回的空的伪数组的形式
//获取某一个元素内部所有指定签名的子元素
// element.getElementsByTagName('标签名') //父元素必须是单个对象(必须指明哪一个元素对象) 获取的元素不包括父元素
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
3.通过H5新增方法获取,（getElementsByClassName(),querySelector(),querySelectorAll()）
//根据类名获取某些元素
var ch = document.getElementsByClassName('box');
console.log(ch);
//返回指定选择器的第一个元素对象
var first = document.querySelector('.box');
console.log(first);
var nav = document.querySelector('#nav'); //querySelector('选择器')
console.log(nav);
// 返回指定选择器的所有元素对象集合
var all = document.querySelectorAll('.box') //querySelectorAll('选择器')
console.log(all);
4.获取特殊元素（body,html）
//获取body元素
var body = document.body;
console.log(body);
//获取html元素
var html = document.documentElement;
console.log(html);
二. 事件
1.事件概念：触发响应机制
2.事件三要素 ①事件源 ②事件类型 ③事件处理程序
3.事件执行过程
//1.获取事件源 2.注册事件(绑定事件) 3.添加事件处理程序
var divq = document.querySelector('div');
divq.onclick = function() {
console.log('我被选中了');
}
三.操作元素
1.修改元素内容（innerText和innerHTML（属性）的区别）
//innerText 不识别HTML标签 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是</strong>：2022年8月31日';
//innerHTML 识别HTML标签 保留空格和换行
div.innerHTML = '<strong>今天是</strong>：2022年8月31日';
//这两个属性是可读写的
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
2.修改元素属性（元素.属性 = 属性值）
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="./6caa5bf4ab8eb5862d4db3ad4f0c506f.jpeg" alt="">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
zxy.onclick = function () {
img.src = '1dc45da715f9def5d0a6dc0ddab12ceb.jpeg';
img.title = '张学友'
}
ldh.onclick = function () {
img.src = '6caa5bf4ab8eb5862d4db3ad4f0c506f.jpeg';
img.title = '刘德华';
}
</script>
3.修改表单属性
<button>按钮</button>
<input type="text" value="请点击">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function () {
input.value = '被点击了';
//如果想要表单被禁用不能再点击，就用disabled
// btn.disabled = true;
this.disabled = true; //this指向的是事件函数的调用者
}
</script>
4.修改样式属性
<div></div>
<script>
//1.获取元素
var div = document.querySelector('div');
div.onclick = function () {
//element.style 行内样式操作 ,样式采用驼峰式命名法 ,行内样式权重高
div.style.backgroundColor = 'red';
//
}
</script>
5.className 获取或设置指定元素的 class 属性的值
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.change {
background-color: yellow;
color: red;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
//element.className 类名样式操作
this.className = 'change';
}
</script
</body>
四.自定义属性
1.获取属性值
//2.element.getAttribute('属性') get得到获取attribute属性的意思
console.log(div.getAttribute('id'));
//区别
// element.属性值 获取内置属性值(元素本身自带的属性)
// element.getAttribute('属性') 主要获取自定义属性，我们程序员自已定义的属性
2.移除自定义属性
// 对象.setAttribute('属性'，'值') 自定义属性值
div.setAttribute('index',3);
div.setAttribute('class',footer);
//移除属性值 对象.removeAttribute('属性');
div.removeAttribute('class');
3.H5自定义属性
//自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
// 自定义属性获取使用过getAttribute('属性')获取
// H5规定自定义属性data开头做为属性名并且赋值。
// 获取H5自定义属性
// 1.兼容性获取 对象.getAttribute('data-index')
// 2.H5新增对象.dataset.index或者对象.dataset['index'] ie11才开始支持
