演示过程需要用到一段示例代码,用于演示各种操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逆水行舟不进则退</title>
<style>
.c1{
background-color: red;
}
.c2{
height: 200px;
}
.c3{
font-size: larger;
}
</style>
</head>
<body>
<div id="i1" class="c1 c2">
第一行
</div>
<div>
<input id="i2" type="text" style="height: 100px">
</div>
</body>
演示页面结果:
下面的演示为在浏览器中的console下所执行的
1.获取标签的样式类名:className
document.getElementById('i1').className
"c1 c2"
2.获取标签的样式类名以列表的形式,并且可以通过add和remove操作进行增加和删除样式:classList
document.getElementById('i1').classList
DOMTokenList(2) ["c1", "c2", value: "c1 c2"]
document.getElementById('i1').classList.add('c3')
可以发现字体变大了,加上了c3这个样式
document.getElementById('i1').classList.remove('c3')
3.在某一个标签下加入一个普通的style样式:style.属性名
document.getElementById('i1').style.fontSize='30px';
"30px"
4.设置删除获取标签的属性:setAttribute,removeAttribute,getAttribute
document.getElementById('i2').getAttribute('type')
"text"
document.getElementById('i2').setAttribute('value','啊啊啊啊')
document.getElementById('i2').removeAttribute('value')
5.添加一个标签
var tag='<p>我是添加的标签</p>';
undefined
document.getElementById('i2').insertAdjacentHTML('afterend',tag)
undefined
其中afterend的位置一共有四个属性,一beforebegin,二afterbegin,三beforeend,四afterend 他们插入的位置如下
一
<div>
二
...
...
三
</div>
四
6.在console下打印一些信息:console.log()
console.log('我是console')
VM665:1 我是console
undefined
7.刚进入页面的提示信息:alert
alert('123')
8.刚进入页面时的确认信息:confirm
confirm('确定要进入吗')
点确定的话,confirm为true,否则为false
9.获取当前的URL:location.href重新加载页面:location.reload
location.href
"file:///E:/%E6%9D%8E%E7%89%B9%E5%AE%87%E7%9A%84%E7%A0%94%E7%A9%B6%E5%86%85%E5%AE%B9/%E8%AF%AD%E8%A8%80%E7%9A%84%E5%AD%A6%E4%B9%A0/%E7%AC%AC17%E5%91%A8-Python3.5-%E9%9B%B6%E5%9F%BA%E7%A1%80-%E9%AB%98%E7%BA%A7-%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%E6%9C%80%E6%96%B0%E6%95%99%E7%A8%8B-%E5%85%B123%E7%AB%A0%E8%8A%82/day17/s1.html"
location.reload
ƒ reload() { [native code] }