一、DOM(文档对象模型)
作用:提供操作html文档、html标签的能力。
window.document document可以省略。
方法:
1.获取标签元素的方法
getElementById('id名') id名唯一
getElementsByClassName('类名') 返回类数组(伪数组)
类数组和数组Array区别
1.类数组不能使用Array的常用方法
push pop splice……
2.类数组可以遍历,可使用[]访问元素getElementsByTagName('标签名')
getElementsByName('name属性值') 根据name属性
2.querySelector 和 querySelectorAll 【推荐使用】
queryselector() 只返回一个元素
querySelectorAll() 返回所有元素存储在类数组里面
复习一下css选择器:
2.1基本选择器
标签
id class
2.2层级选择器
子代选择器
后代选择器
M>N
M N
兄弟选择器
M~N M+n
2.3伪类选择器
M N:nth-child(n)
2.4属性选择器
input[name]
input[name='username']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<!--
DOM 文档对象模型 document object model
操作html中标签的能力
-->
</head>
<body>
<h2 id="title">DOM学习</h2>
<div class="d1">元素一</div>
<div class="d1">元素一</div>
<div class="d2">元素3</div>
<input type="text" name="username">
<script>
function test1(){
var h2Ele = document.getElementById('title') //id名为title的
console.log(h2Ele)
}
test1()
function test2(){
var divEles = document.getElementsByClassName('d1') //类名为d1的
console.log(divEles)
for(var i =0; i < divEles.length; i++){
console.log(divEles[i])
}
}
test2()
function test3(){
var divEles = document.getElementsByTagName('div') //标签为div的
console.log(divEles)
}
test3()
function test4(){
var h2Ele = document.querySelector('#title') //id名为title的
console.log(h2Ele)
}
test4()
function test5(){
// var divEles = document.querySelector('.d1')
var divEles = document.querySelectorAll('.d1') //所有类名为d1的
console.log(divEles)
}
test5()
function test6(){
var inName = document.getElementsByName('username') //属性名为username的
console.log(inName)
}
test6()
</script>
</body>
</html>
二、操作内容
innerHTML 和 innerText
<h2 id="title">元素一</h2>
<script>
var h2Ele = document.querySelector('#title')
h2Ele.innerHTML //获取内容
h2Ele.innerHTML='新内容' //设置内容//innerHTML返回的是它设置的内容
//innerText 以纯文本形式显示
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作内容</title>
</head>
<body>
<!--
操作非表单元素 innerText 和 innerHTML
操作表单元素 value
-->
<h2 id="title">元素一</h2>
<h2 class="title">元素二</h2>
<input type="text" name="message" placeholder="请输入内容" value="rose">
<script>
function test1(){
var h2Ele1 = document.querySelector('#title')
var h2Ele2 = document.querySelector('.title')
console.log('内容:',h2Ele1.innerHTML); //输出获取到的内容:内容:元素一
console.log('内容:',h2Ele2.innerText); //输出获取到的内容:内容:元素二
h2Ele1.innerHTML='<h3>innerHTML设置的内容</h3>' //页面显示设置的内容:innerHTML设置的内容
h2Ele2.innerText='<h3>innerText设置的内容</h3>' //页面显示纯文本:<h3>innerText设置的内容</h3>
}
test1()
function test2(){
var inputEle = document.querySelector('input[name="message"]')
inputEle.value='jack' //覆盖掉默认value值rose为jack
console.log(inputEle.value)
}
test2()
</script>
</body>
</html>
三、操作样式
使用js代码动态操作样式
1.获取行内样式style
element.style.样式名
=>样式值
element.style.样式名 = 样式值
2.类样式
(1)element.className='类名'
注:一次设置多个类名用空格隔开;同一个元素多次设置,后面的类名会覆盖前面的类名。
(2)element.classList
- 通过ClassList 可以获取元素的全部类名
- 通过ClassList.remove() 可以删除元素的一个或多个类名
- 通过ClassList.add() 可以向元素添加一个或多个类名,多个用逗号隔开
- 通过ClassList.lentgh 可以获取到元素类名的数量
- 通过ClassList.item(x) 可以获取到元素类名索引为x的类名
- 通过ClassList.toggle() 可以为元素切换类;若检测到没有设置的类就添加,若检测到有设置的类就删除
- 通过ClassList.contains(x) 查看元素是否存在类名为"x"的类,有就返回true
获取非行间样式
window.getComputedStyle(元素).样式名
=>样式值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.d1 {
width:200px;
height:200px;
background-color:
skyblue;
}
.colorBlue{
color: blue;
}
</style>
</head>
<body>
<h2 style="color:red;">操作样式</h2>
<div class="div1">元素一</div>
<h3 class="d3">元素二</h3>
<p></p>
<button onclick="getStyleTest()">获取style样式</button>
<button onclick="setStyleTest()">设置style样式</button>
<button onclick="setClassStyle()">设置class样式</button>
<button onclick="getClassStyle()">获取非行间样式</button>
<script>
//获取h2标签的行内样式
function getStyleTest() {
var h2Ele = document.querySelector('h2')
var colorValue = h2Ele.style.color //行内式,获取样式中颜色属性的属性值
var pEle = document.querySelector('p')
pEle.innerHTML = colorValue
}
function setStyleTest() {
var h2Ele = document.querySelector('h2')
h2Ele.style.color = 'green' //为h2设置颜色为绿色
}
function setClassStyle(){
var divEle = document.querySelector('div')
// divEle.className = 'd1'
// divEle.className = 'd1 d2' //设置两个类名
divEle.classList.add('d1')
console.log(divEle.classList)
}
function getClassStyle(){
var h3Ele = document.querySelector('h3')
var w = window.getComputedStyle(h3Ele).width //获取h3的宽度样式
console.log('w :',w);
}
var divEle = document.querySelector(".div1")
divEle.onclick = function(){
//点击类名为div1的元素,如果它有类colorBlue就清除colorBlue设置的样式,没有就加上
divEle.classList.toggle('colorBlue')
}
</script>
</body>
</html>
四、操作属性
js代码动态获取属性值或设置属性
1.获取属性值
element.getAttribute('属性名')
=>属性值
element.属性 必须是本身拥有的属性
=>属性值
2.设置属性
element.setAttribute('属性名','属性值')
element.属性名=属性值
3.删除属性
element.removeAttribute('属性名')
element.属性名=属性值
4.data-属性名 自定义属性格式
element.dataset.属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作属性</title>
</head>
<body>
<h2 id="title" class="d1" a="100" b="200">元素一</h2>
<h3>元素二</h3>
<a href="http://www.baidu.com">百度</a>
<img src="./岛上书店/images/11239.png" alt="图片">
<img src="" alt="图片2">
<!--自定义属性-->
<h4 data-index="1001" data-score="98">元素三</h4>
<button onclick="getAttr()">获取属性</button>
<button onclick="setAttr()">设置属性</button>
<button onclick="removeAttr()">移除属性</button>
<button onclick="getMyAttr()">获取自定义属性</button>
<script>
function setAttr(){
var h3Ele = document.querySelector('h3')
h3Ele.setAttribute('id','title') //id='title'
h3Ele.setAttribute('a','1000') //自定义属性a=1000
var imgEle = document.querySelectorAll('img')[1] //下标从0开始
// imgEle.setAttribute('src','./岛上书店/images/book.jpg')
imgEle.src='./岛上书店/images/book.jpg'
}
setAttr()
function getMyAttr(){
var h4Ele = document.querySelector('h4')
var index = h4Ele.getAttribute('data-index') //获取自定义属性的属性值
var score = h4Ele.dataset.score //获取自定义属性的属性值
console.log(index) //1001
console.log(score) //98
}
getMyAttr()
function removeAttr(){
var h2Ele = document.querySelector('h2') // 获取h2元素
h2Ele.removeAttribute('a') //删除自定义的a属性
}
removeAttr()
function getAttr(){
var imgEle = document.querySelector('img') // 获取img元素
var idValue = imgEle.getAttribute('src') // 获取img元素src属性值
console.log(idValue) //./岛上书店/images/11239.png
console.log(imgEle.src)
}
getAttr()
</script>
</body>
</html>
五、操作事件
给元素绑定点击事件
直接给元素添加onclick属性实现
绑定事件:
(1)属性事件
(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>操作事件</title>
<style>
div{
width: 90px;
height: 20px;
border: 1px solid #000;
text-align: center;
margin-top: 10px;
border-radius: 10px;
}
div:hover{
cursor: pointer;
}
</style>
</head>
<body>
<button>按钮</button>
<div>点击试试</div>
<script>
var btn = document.querySelector('button')
btn.onclick = function(){
alert('绑定事件')
}
var divEle = document.querySelector('div')
divEle.onclick = function(){
divEle.innerHTML = '今天是周五'
}
</script>
</body>
</html>