<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id='i1' href="http://www.baidu.com"> baidu</a>
<div id='i2'>helloworld</div>
<div id="i3" style="position: fixed;top :100px;left: 100px">div2</div>
<div>
<form id="form" action="" method="post" enctype="multipart/form-data">
<input type="text" name="user"/>
<input type="password" name="password"/>
<input type="submit" value="login" />
<input type="radio" onclick="f()" > login</input>
</form>
</div>
</body>
<script>
//創建標簽
var tag=document.createElement('div');
tag.innerText='randomlee';
tag.className='c1';
console.log(tag);
</script>
<script>
//插入標簽
var obj = document.getElementById('i1');
var beforeBegin="<a>beforeBegin</a>";
var afterBegin="<a>afterBegin</a>";
var beforeEnd="<a>beforeEnd</a>";
var afterEnd="<a>afterEnd</a>";
//在目標標簽前插入一個便簽 例：<a>beforeBegin</a> <a id='i1' href="http://www.baidu.com"> baidu</a>
obj.insertAdjacentHTML("beforeBegin",beforeBegin);
//在目標標簽text前面插入一個便簽 例：<a id='i1' href="http://www.baidu.com"> <a>afterBegin</a> baidu</a>
obj.insertAdjacentHTML('afterBegin',afterBegin);
//在目標標簽text后面插入一個便簽 例: <a id='i1' href="http://www.baidu.com"> baidu <a>beforeEnd</a></a>
obj.insertAdjacentHTML('beforeEnd',beforeEnd);
//在目標標簽后插入一個便簽 例: <a id='i1' href="http://www.baidu.com"> baidu</a><a>afterEnd</a>
obj.insertAdjacentHTML('afterEnd',afterEnd);
</script>
<script>
//樣式操作
var tag=document.getElementById('i2');
tag.style.color='red';
tag.style.backgroundColor='green';
tag.style.height='100px';
</script>
<script>
//位置操作
/*
總文檔高度
document.documentElement.offsetHeight
當前文檔占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距離上級定位高度
tag.offsetTop
父定位標簽
tag.offsetParent
滾動高度
tag.scrollTop
*/
/*
clientHeight -> 可見區域：height + padding
clientTop -> border高度
offsetHeight -> 可見區域：height + padding + border
offsetTop -> 上級定位標簽的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滾動高度
特別的：
document.documentElement代指文檔根節點
*/
</script>
<script>
//提交表單
function f() {
document.getElementById('form').submit()
}
</script>
<script>
//其他操作
/*
console.log 輸出框
alert 彈出框
confirm 確認框
// URL和刷新
location.href 獲取URL
location.href = "url" 重定向
location.reload() 重新加載
// 定時器
setInterval 多次定時器
clearInterval 清除多次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器
*/
</script>
</html>
//事件
對於事件需要注意的要點：
- this
- event
- 事件鏈以及跳出
this標簽當前正在操作的標簽，event封裝了當前事件的內容。