目录
1.获取dom的三种方式
2.获取文本值的操作
3.节点对象属性操作
4.样式操作
5.DOM操作
一. 获取dom的三种方式
document.getElementById(' ') 通过id获取
document.getElementsByTagName(' ') 通过标签获取，得到的值数组
获取数组里面的值课通过索引的方式例如：
var oDiv = document.getElementsByTagName('div')[0];
console.log(oDiv);
document.getElementsByClass(' ') 通过类获取
document.querySelector(#id|类) 可以写所有选择器
document.querySelectorAll(#id|类) 获取所有
二. 获取文本值的操作
innerText 获取当前文本值
var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
oDiv[i].onclick = function () {
console.log(this);
alert(this.innerText)
innerHTML 获取当前的标签和文本
var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
oDiv[i].onclick = function () {
console.log(this);
alert(this.innerHTML)
value 只针对于表达控件
var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
oDiv[i].onclick = function () {
// console.log(this);
// alert(this.innerHTML)
this.innerHTML=`<a href="#">hello world1</a>`
的标签和
var input = document.querySelector('input[type=text]');
input.value = '123'
延迟方法设置值
var input = document.querySelector('input[type=text]');
setTimeout(function (){
input.value='alex'
},3000);
三.对节点对象属性的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
200px;
height: 200px;
background-color: red;
}
div .active{
background-color: green;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div');
setTimeout(function () {
// oDiv.id = 'box'; 设置属性
//oDic.setAttribute('id','box') 设置属性
oDiv.className = 'active'; 设置属性
},3000);
</script>
</body>
</html>
oDic.getAttribute（key） 获取值
oDic.removeAttribute(key) 删除属性
四.样式操作
把所有的属性都保存在一个属性对象中 style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点我</button>
<div class="box">alex</div>
<script>
var btn = document.querySelector('button');
var Odiv = document.querySelector('.box');
btn.onclick = function () {
Odiv.style.fontSize = '30px';
Odiv.style.color = 'green';
Odiv.style.backgroundColor = 'red';
}
</script>
</body>
</html>
基于setInterval定时器设置动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height: 200px;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<button>点我</button>
<div class="box">alex</div>
<script>
var btn = document.querySelector('button');
var Odiv = document.querySelector('.box');
var num = 0;
btn.onclick = function () {
Odiv.style.fontSize = '30px';
Odiv.style.color = 'green';
Odiv.style.backgroundColor = 'red';
// Odiv.style.left = '20px'
setInterval(function () {
num+=2;
Odiv.style.left = num + 'px';
},1000)
};
</script>
</body>
设置清空动画 clearInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height: 200px;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<button>点我</button>
<div class="box">alex</div>
<script>
var btn = document.querySelector('button');
var Odiv = document.querySelector('.box');
var num = 0;
var timer = null;
btn.onclick = function () {
Odiv.style.fontSize = '30px';
Odiv.style.color = 'green';
Odiv.style.backgroundColor = 'red';
// Odiv.style.left = '20px'
timer = setInterval(function () {
num+=2;
if (num >=100){
clearInterval(timer)
}
Odiv.style.left = num + 'px';
},1000)
};
</script>
</body>
</html>
五. DOM操作
document.createElement(标签) 创建
父元素.appendChild（子）追加
父.removeChild(新的元素.参考元素)删除
insertBefore(子)在某个标签前添加元素
例子：把input输入框的东西展示在网页显示<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入评论">
<button id="btn">提交</button>
<ul>
</ul>
<script>
function $(selector) {
return document.querySelector(selector);
}
var oUl = $('ul');
$('#btn').onclick = function () {
//获取输入框的值
var commentVal = $('input').value;
// 创建新标签
var li = document.createElement('li');
li.innerHTML = commentVal;
// 追加到oUl
oUl.appendChild(li);
$('input').value= ' ';
}
</script>
</body>
</html>