<!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封装了当前事件的内容。
js之标签操作
原文地址：https://www.cnblogs.com/randomlee/p/9723177.html