DOM：文档对象模型
核心
整个浏览器网页就是一个Dom树形结构
更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作Dom节点，必须先获得这个节点
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var father = document.getElementById(‘father‘);
var h1 = document.getElementsByTagName(‘h1‘);
var p1 = document.getElementById(‘p1‘);
var p2 = document.getElementsByClassName(‘p2‘);
var childrens = father.children; // 父节点下的所有子节点
</script>
</body>
这是原生代码，之后尽量使用jQuery()
删除节点的步骤：先获取父节点，在通过父节点删除自己
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById(‘p1‘);
var father = p1.parentElement;
father.removeChild(p1)
</script>
</body>
追加
<body>
<p id="js">Javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById(‘js‘);
var list = document.getElementById(‘list‘);
list.appendChild(js); //追加到后面
</script>
</body>
创建一个新的标签实现插入
<script>
var js = document.getElementById(‘js‘);
var list = document.getElementById(‘list‘);
var newp = document.createElement(‘p‘); //创建一个p标签
newp.id = ‘newp‘;
newp.innerText = ‘Hello‘;
list.appendChild(newp);
</script>
insertBefore
<script>
var js = document.getElementById(‘js‘);
var list = document.getElementById(‘list‘);
var ee = document.getElementById(‘ee‘);
list.insertBefore(js,ee);
</script>
表单是什么 form DOM树
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.....
表单的目的：提交信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="5.操作表单.html" method="get">
<p>
<span>用户名：</span>
<input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById(‘username‘);
var boy_radio = document.getElementById(‘boy‘);
var girl_radio = document.getElementById(‘girl‘);
//得到输入框的值
input_text.value
//多选框查看返回的结果是否为true
boy_radio.checked
</script>
</body>
</html>
提交表单
<body>
<form action="#" method="post">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span>
<input type="password" id="password" name="password">
</p>
<!-- 绑定事件 onclick被点击后执行函数 -->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById(‘username‘);
var pwd = document.getElementById(‘password‘);
console.log(uname.value)
console.log(pwd.value)
}
</script>
</body>
原文：https://www.cnblogs.com/zzh-lq/p/13618738.html