文章目录
- 获取元素
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
- 事件基础
- 操作元素
- 修改元素的内容
- 常见元素的属性操作
- 操作表单元素属性
- 操作样式属性
- Web API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM) 。
- DOM就是一个编程接口,处理可扩展标记语言(HTML或XML)。通过DOM接口,可以改变网页的内容、结构和样式。
- 一个页面就是一个文档。用document表示。
- 页面中的所有标签就是元素,用element表示。
- 页面中的所有内容都可以看作是节点(标签、属性、文本和注释),用node表示。
获取元素
根据ID获取
使用getElementById()的方法获取。注意括号中的参数需要是字符串。返回的是一个DOM element对象,如果没找到,则返回null。
注意需要以document开头。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">2021-08-07</div>
</body>
<script>
var timer = document.getElementById('time') //注意:JS从上往下加载,所以先要有标签,在获取。所以JS要写在下方。
console.log(timer);
console.dir(timer);//打印返回的元素对象,可以查看里面的属性和方法。
</script>
</html>
根据标签名获取
使用getElementsByTagName()方法,返回的是带有指定标签名的对象的集合。
括号中的参数是标签名,注意用字符串的格式。
如果没有这个标签,则返回一个空的伪数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[1]);
//用for循环来遍历
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>
</body>
</html>
如果页面中不仅有ul还有ol;如果只想获取ul中的li标签,则需要设定父元素。父元素必须是单个对象。一般通过如下方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ul>
<ol id="ol">
<li>python1</li>
<li>python2</li>
<li>python3</li>
<li>python4</li>
<li>python5</li>
</ol>
<script>
var getId = document.getElementById('ol')
var lis = getId.getElementsByTagName('li');
console.log(lis);
</script>
</body>
</html>
通过HTML5新增的方法获取
根据类名获取元素,document.getElementsByClassName(‘类名’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var lis = document.getElementsByClassName('box')
console.log(lis);
</script>
</body>
</html>
根据指定选择器返回第一个元素对象。document.querySelector(‘选择器’)。需要加符号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var lis = document.getElementsByClassName('box')
console.log(lis);
//指定选择器,选择类型
var firstBox = document.querySelector('.box')
console.log(firstBox);
//指定选择器,选择id
var nav = document.querySelector('#nav')
console.log(nav);
//指定选择器,选择标签
var li = document.querySelector('li')
console.log(li);
</script>
</body>
</html>
上面的只能返回第一个元素对象,如果想返回全部的,应该使用**querySelectorAll()**函数。用法与上述相同。
特殊元素获取
获取body元素和html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//返回的是一个元素对象。
var getBody = document.body
console.log(getBody);
var getHtml = document.documentElement
console.log(getHtml);
</script>
</body>
</html>
事件基础
事件是JavaScript可以监听的行为,是一种触发响应的一种机制。像点击事件、鼠标事件和键盘事件等。
事件是由三部分组成的,分别是事件源、事件类型和事件处理程序。
事件源是事件被触发的对象,像按钮。
事件类型,例如鼠标点击、鼠标经过、键盘按下触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn')
btn.onclick = function() {
console.log('按钮被点击');
}
</script>
</body>
</html>
执行事件的步骤:
- 获取事件源,使用上述获取元素的方法。
- 绑定事件。btn.onclick
- 添加事件处理程序。
操作元素
操作元素首先要按照上述方法获取元素。
修改元素的内容
element.innerText:从起始位置到终止位置的内容,去除html标签,同时空格和换行也去掉。
element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 点击按钮 将当前的时间显示到div中去 -->
<button id="btn">按钮</button>
<div>某个时间</div>
<script>
var btn = document.getElementById('btn')
var div = document.querySelector('div')
btn.onclick = function() {
div.innerText = new Date()
}
</script>
</body>
</html>
常见元素的属性操作
src、href、title等。
案例:点击按钮2改变图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="pic1">按钮1</button>
<button id="pic2">按钮2</button>
<img src="https://hao1.qhimg.com/t01ea3a44e231e5d6f4.png" alt="">
<script>
var pic1 = document.querySelector('#pic1')
var pic2 = document.querySelector('#pic2')
var img = document.querySelector('img')
pic2.onclick = function() {
img.src = 'https://pic3.zhimg.com/v2-12e0d5c340b583f8895afcf88c8db14e_is.jpg'
}
</script>
</body>
</html>
操作表单元素属性
如果想修改表单中的内容,可以通过value属性进行修改。
使用dom可以操作type、value、checked、selected、disabled这些表单元素的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="请输入内容">
<script>
var btn = document.querySelector('button')
var input = document.querySelector('input')
btn.onclick = function() {
//表单中的值是通过value来修改的。
input.value = '内容发生变化'
//如果想要一个表单不能再点击
btn.disabled = true
//除了这种写法,还可以写为this.disabled=true,this指的是事件函数的调用者。
}
</script>
</body>
</html>
操作样式属性
通过JavaScript修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
element.className 类名样式操作,样式很多的时候使用。