获取元素:
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
/*
1. 根据id获取一个
语法：document.getElementById('id名称')
作用：获取文档流中 id 对应的一个元素
返回值：如果有 id 对应的元素，就是这个元素；如果没有就是 null
*/
var ele = document.getElementById('container')
console.log(typeof(ele)) //object
console.log(ele)
/*
2. 根据类名获取一组
语法：document.getElementsByClassName('类名')
作用：获取文档流中 所有类名 对应的元素
返回值：必然是一个伪数组，如果有类名对应的元素，有多少获取多少；如果没有，就是空的伪数组
*/
var eles = document.getElementsByClassName('box')
console.log(typeof(eles)) //object
console.log(eles)
/*
3. 根据标签名获取一组
语法：document.getElementsByTagName('标签名')
作用：获取文档流中 所有标签名 对应的元素
返回值：必然是一个伪数组，如果有标签名对应的元素，有多少获取多少；如果没有，就是空的伪数组
*/
var eles = document.getElementsByTagName('div')
console.log(typeof(eles)) //object
console.log(eles)
/*
4. 根据选择器获取一个
语法：document.querySelector('选择器')
作用：获取文档流中 满足选择器规则 的第一个元素
返回值：如果满足选择器规则的元素，获取第一个；如果没有，就是 null
*/
var ele = document.querySelector('.box')
console.log(typeof(ele)) //object
console.log(ele)
/*
5. 根据选择器获取一组
语法：document.querySelectorAll('选择器')
作用：获取文档流中 满足选择器规则 的所有元素
返回值：必然是一个伪数组，如果有满足选择器规则的元素，有多少获取多少；如果没有，就是空的伪数组
*/
var eles = document.querySelectorAll('.box')
console.log(typeof(eles)) //object
console.log(eles)
</script>
</body>
操作元素:
-
操作元素文本内容
<body>
<button>操作内容</button>
<div>
<p>我是P标签</p>
</div>
<script>
/*
操作元素内容
操作 文本 内容
获取：元素.innerText
设置：元素.innerText = '新内容'
操作 超文本 内容
获取：元素.innerHTML
设置：元素.innerHTML = '新内容'
*/
// 操作 文本 内容
var ele = document.querySelector('div')
var btn = document.querySelector('button')
console.log(ele.innerText)
btn.onclick = function () {
ele.innerText = '新内容'
}
// 操作 超文本 内容
var ele = document.querySelector('div')
var btn = document.querySelector('button')
console.log(ele.innerHTML)
btn.onclick = function () {
ele.innerHTML = '<span>新内容</span>'
}
</script>
</body>
屏幕截图(13).png
-
操作元素属性
操作元素原生属性和自定义属性
<body>
<button>操作属性</button>
<div id="box" hello="world">div标签</div>
<input type="password">
<script>
/*
操作元素属性
操作 元素 原生属性
获取：元素.属性名
设置：元素.属性名 = '属性值'
操作 元素 自定义属性
获取：元素.getAttribute('属性名')
设置：元素.setAttribute('属性名','属性值')
删除：元素.removeAttribute('属性名')
注意：以上方法一般不用做操作 类名 和 样式
*/
// 操作 元素 原生属性
var box = document.querySelector('div')
var inp = document.querySelector('input')
var btn = document.querySelector('button')
console.log(box.id)
console.log(inp.type)
btn.onclick = function () {
box.id = 'content'
inp.type = 'checkbox'
}
// 操作 元素 自定义属性
var box = document.querySelector('div')
var btn = document.querySelector('button')
var res = box.getAttribute('hello')
console.log(res)
btn.onclick = function () {
box.setAttribute('hello','新来的')
box.removeAttribute('hello')
}
</script>
</body>
操作元素类名
<script>
/*
操作元素类名（有专用方法）
获取：元素.className
设置：元素.className = '新类名'
*/
</script>
屏幕截图(14).png
- 操作元素样式
<!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>
<style>
div{
font-size: 20px;
}
</style>
</head>
<body>
<button>操作样式</button>
<div style="width:100px; height:100px; background-color:pink">文本内容</div>
<script>
/*
操作元素行内样式
获取：元素.style.样式名
设置：元素.style.样式名 = '样式值'
获取 元素 非行内样式
获取：window.getComputedStyle(元素).样式名
注意：可以获取行内，也可以获取非行内样式。js无法设置元素的非行内样式
*/
// 操作元素行内样式
var box = document.querySelector('div')
var btn = document.querySelector('button')
console.log(box.style.width)
console.log(box.style.height)
console.log(box.style.backgroundColor)
btn.onclick = function () {
box.style.width = '200px'
box.style.height = '300px'
box.style.backgroundColor = 'skyblue'
}
// 获取元素非行内样式
var box = document.querySelector('div')
var btn = document.querySelector('button')
console.log(window.getComputedStyle(box).width)
console.log(window.getComputedStyle(box).height)
console.log(window.getComputedStyle(box).fontSize)
</script>
</body>
</html>
屏幕截图(15).png
