python学习之网站的编写（HTML，CSS，JS）（二十）----------文本对象模型dom之操作大全之样式操作，以及其他操作，提示信息，确认信息，重新加载，定时器

演示过程需要用到一段示例代码，用于演示各种操作：

<!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] }