前言：

本文内容：删除DOM节点、创建和插入DOM节点、获得和设置表单的值

推荐免费JavaScript基础讲解视频：【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除自己。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="father">
    <h1>标题一</h1>
    <p id="p1">one</p>
    <p class="p2">two</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var father = document.getElementById('father');
	// 通过father移除子节点p1
	father.removeChild(p1)
    father.removeChild(father.children[0])
</script>

注意：删除多个节点是一个动态的过程，children是在变化的。

创建和插入DOM节点

插入节点

我们获得某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，若这个DOM节点已经存在元素了，那就得内容就会被覆盖。

追加

1
2
3
4
5
6
7
8
9
10
11
12
<p id="js">JavaScript</p>
<div id="father">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var father = document.getElementById('father');
    var js = document.getElementById('js');
    // 追加元素到后面
    father.append(js)
</script>

创建新节点，实现插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<p id="js">JavaScript</p>
<div id="father">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var father = document.getElementById('father');
    var js = document.getElementById('js');
    // 追加元素到后面
    father.append(js)
    // 通过js 创建一个新的节点
    var newp=document.createElement('p');// 创建一个p标签
    newp.id='newp';
    newp.innerText='创建p标签'
    father.appendChild(newp)
	// 创建一个标签节点
    var myscript=document.createElement('script');
    myscript.setAttribute('type','text/javascript');
	// 插入script标签
    father.appendChild(myscript);
 	// 修改body背景 需要为body定义id后来实现
    var baby=document.getElementById('body')
    baby.style.background='#e09999';
    // 通过创建style标签 来修改body背景
    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML= 'body{background: #e09999}';
    document.getElementsByTagName('head')[0].appendChild(myStyle);

insertBefore

1
2
3
4
5
6
7
// js插入到ee之前  insertBefore(要插入的节点,目标节点)
   var ee = document.getElementById('ee');
   father.insertBefore(js,ee);
   // me插入到se前
   var se = document.getElementById('se');
   var me = document.getElementById('me');
   father.insertBefore(me,se);

获得和设置表单的值

表单From

  • 文本框 text
  • 密码框 password
  • 下拉框 select…option
  • 复选框 checkBox
  • 单选框 radio
  • 隐藏域 hidden
  • …

表单作用：提交信息

获得提交信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="#">
    <p>
        <span>账号</span>
        <input type="text" name="user" id="user">
    </p>
    <p>
        <span>性别</span>
        <input type="radio" name="sex" id='boy' value="男" checked="checked">男
        <input type="radio" name="sex" id='girl' value="女">女
    </p>
    <p>
        <input type="submit" name="login" value="登录" id="login">
    </p>
</form>
<script>
    // 获取表单dom
    var input_text = document.getElementById('user');
    var man = document.getElementById('boy');
    var girl = document.getElementById('girl');
    // 获取账号输入框值
    input_text.value;
    // 修改账号输入框值
    input_text.value='jokerdig';
    // 获取单选框选中情况
    console.log(man.checked);
    console.log(girl.checked);
    girl.checked=true;// 女被选中

</script>
</body>
</html>