—— 此篇开始 ——
1. 操作元素内容
1. innerText
读取:
语法:元素.innerText
得到:该元素内所有文本内容
写入:
语法:元素.innerText = '值'
作用:完全覆盖式的书写该元素内的文本内容
注意:如果你设置一个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>hello world</div>
<script>
var div = document.querySelector('div')
console.log (div.innerText); //读取
div.innerText = "我是设置的内容" //写入
console.log (div);
</script>
</body>
</html>
结果:
2. innerHTML
读取:
语法:元素.innerHTML
得到:该元素下所有内容,以字符串的形式给你
写入:
语法:元素.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>hello world</div>
<script>
var div = document.querySelector('div')
console.log (div.innerHTML); //读取
div.innerHTML = "<p>我是<i>后来</i>的内容</p>" //写入
console.log(div);
</script>
</body>
</html>
结果:
3. value
读取:
语法:表单元素.value
得到:该表单元素的value值
写入:
语法:表单元素.value = '值'
作用:完全覆盖式的书写该表单元素的value值
代码:
<!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>
<input type="text" value="123" />
<script>
var inp = document.querySelector('input')
console.log (inp.value) //读取
inp.value = "你好" //写入
console.log (inp.value);
</script>
</body>
</html>
结果:
2. 操作元素属性
1. 原生属性,html规范内有的属性
比如id,class,style,type...对于标签有特殊意义的,直接使用 元素.属性名 的形式操作
读取:
语法:元素.属性名
得到:该元素,该属性名对应的属性值
写入:
语法:元素.属性名 = 属性值
作用:修改该元素的该属性的值
代码:
<!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>
<input type="text">
<script>
var div = document.querySelector('div')
var inp = document.querySelector('input')
div.id = "zs" //写入
console.log (div.id); //读取
console.log (inp.type); //读取
</script>
</body>
</html>
结果:
2. 自定义属性,在html规范内没有的属性
我们随便书写一个属性名,对于标签没有特殊意义,只为了标注一些内容在标签上
获取自定义属性的值:
语法:元素.getAttribute('属性名')
返回值:该元素内该属性名对应的属性值
设置自定义属性的值:
语法:元素.setAttribute('属性名','属性值')
作用:给元素设置一个自定义属性
删除自定义属性:
语法:元素.removeAttribute('属性名')
作用:删除该元素的某一个属性
代码:
<!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 hello="world" zs="nihao">你好世界</div>
<script>
var div = document.querySelector('div')
var res = div.getAttribute('zs') //获取自定义属性
console.log (res);
div.setAttribute('abc','哈哈哈哈') //设置自定义属性
console.log (div);
div.removeAttribute('hello') //删除自定义属性
</script>
</body>
</html>
结果:
3. H5自定义属性
在H5标准下,提出的一个自定义属性的书写方式,书写规则:data-开头,例子:data-a="100",属性名:a,属性值:100
在元素身上有一个叫dataset的成员,是一个类似对象的数据类型,里面存储着所有的元素身上以data-开头的H5自定义属性,对于H5自定义属性的操作,就是对这个类似对象的数据类型进行操作
代码:
!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 data-a="100">你好世界</div>
<script>
var div = document.querySelector('div')
console.log(div.dataset); //获取
console.log(div.dataset.a); //获取
div.dataset.a = 200 //修改
div.dataset.b = 300 //增加
delete div.dataset.a //删除
console.log (div);
</script>
</body>
</html>
结果: