js之标签操作

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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