一、获取元素
1. 根据ID获取(getElementById(ID)获取元素)
<div id="time">2022-01-23</div>
<script>
var element = document.getElementById('time');
console.log(element);
console.log(typeof element);
console.dir(element);
</script>
2.2. 根据标签名获取元素(getElementByTagName(标签名)获取元素)
document.getElementByTagName('标签名');
还可以获取某个父元素内部所有标签名的子元素,父元素必须指明是哪个元素对象,并且获取的时候不包括父元素自己。
element.getElementByTagName('标签名');
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol id="hei">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
for (var i = 0; i < lis.length; i++)
console.log(lis[i]);
var element = document.getElementById('hei');
console.log(element.getElementsByTagName('li'));
</script>
3. 通过HTML5新增的方式获取
根据类名返回元素对象集合:
document.getElementByClassName('类名');
根据指定选择器返回第一个元素对象:
document.querySelector('选择器');
根据指定选择器返回:
document.querySelectorAll('选择器');
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div id="aa">3</div>
<div id="aa">4</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
var aas = document.querySelector('#aa');
console.log(aas);
var a = document.querySelector('div');
console.log(a);
var aaas = document.querySelector('.box');
console.log(aaas);
var lis = document.querySelectorAll('.box');
console.log(lis);
</script>
运行后控制台结果为:
4.获取特殊元素(body、html)
获取body元素:
document.body
获取html元素:
document.documentElement
二、操作元素
1.操作元素–修改元素内容
从起始位置到终止位置的内容。但去除html标签,同时换行和空格也会去掉:
element.innerTEXT
从起始位置到终止位置的内容。包括html标签,同时保留换行和空格:
element.innerHTML
<button>当前时间</button>
<div>时间</div>
<p>123</p>
<script>
// 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
var p = document.querySelector('p');
// 注册事件
btn.onclick = function() {
div.innerText = 2022;
}
p.innerText = getDate();
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + '\t' + arr[day];
}
</script>
运行结果是:
初始状态为:
点击当前时间的按钮后:
2.操作元素–修改元素属性
点击按钮1、2后会改变图片属性:
<button id="a">1</button>
<button id="b">2</button>
<img src="" alt="" title="12">
<script>
var a = document.getElementById('a');
var b = document.getElementById('b');
var img = document.querySelector('img');
a.onclick = function() {
img.src = '2';
img.title = 123;
}
b.onclick = function() {
img.src = '3';
img.title = 1234;
}
</script>
3.操作元素—修改表单属性
点击按钮后value从’输入内容‘会改为’被点击了‘:
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '被点击了';
btn.disabled = true;
}
</script>
4.操作元素—修改样式属性
行内样式操作:
element.style
类名样式操作:
element.className
点击盒子后,背景颜色从粉色变为紫色,同时盒子宽度发生变化:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div></div>
<script >
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple ';
this.style.width = '300px';
}
</script>
三、自定义属性
1.获取自定义属性
element.getAttribute('属性');
<div getTime="20" data-index="3"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 2);
console.log(div.getAttribute('data-time'));
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
</script>
2.设置自定义属性
element.setAttribute('属性');
3.移除属性
element.removeAttribute('属性');
四、节点
1.父级节点
node.parentNode
parentNode属性可返回某节点的父节点,注意是最近的一个父节点。如果指定的节点没有父节点则返回null
2.子级节点
node.childNodes
3.兄弟节点
4.节点操作之创建和添加节点
5.删除节点
6.复制节点
node.cloneNode()
如果括号参数为空或false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
如果括号参数为true,则是深拷贝,会复制节点本身和里面的子节点。
五、事件
1.注册事件(绑定事件)
<button>方法监听注册事件</button>
<button>传统注册事件</button>
<script>
var btn = document.querySelectorAll('button');
// // 同一个元素同一个事件可以注册多个监听器
btn[0].addEventListener('click', function() {
alert('弹出');
})
btn[0].addEventListener('click', function() {
alert('弹出1');
})
// 传统注册事件的唯一性
btn[1].onclick = function() {
alert('弹出2');
btn[1].onclick = null;
}
</script>
2.删除事件(解绑事件)
3.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即为DOM事件流。
4.事件对象
1.e.target返回触发事件的对象
e.target和this的区别:
<div style="width: 200px;height: 200px;background-color: bisque;" class="div1">
<div class="div2">123</div>
</div>
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
</script>
2.e.type返回事件的类型,如click,不带on
<div>122</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', fn);
function fn(e) {
console.log(e.type);
}
</script>
3.e.preventDefault() 阻止默认行为
4.e.stopPropagation() 阻止事件冒泡
5.事件委托
事件委托的原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点。
6.常见的鼠标事件
禁止选中文字和禁止右键菜单:
获得鼠标在页面中的坐标:
7.常用的键盘事件:
可以用keyCode判断用户输入的是哪个键:
keyCode可以返回改键的ACSII值