JS / DOM

function myClick(idStr,fun){
    var btn=document.getElementById(idStr);
    btn.onclick=fun;
}

//idStr要绑定单击响应函数的对象的ID属性值
//fun 事件的回调函数 

myClick("btn01",function(){
    alert("hello!")
})

注意：onclick事件无大写！！！！不是onClick！！！

获取标签中的文本节点

1.alert(bj.innerText)

2.alert(bj.innerHTML)

3.var fc=bj.firstChild

alert(fc.nodeValue)

获取body

document中有一个属性body

保存的是body的引用

document.body

获取html根标签

document.documentElement

获取页面所有元素

document.all

document.getElementsByTagName('*')

根据class获取元素

document.getElementsByClassName(' ')

ie9及以上支持

常用选择器

document.querySelector(".box div")

接收css选择器作为参数

ie8+

使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那只会返回第一个

document.querySelectorAll(" ")

将符合条件的元素封装到一个数组中，能返回符合条件的多个元素，即使符合条件的只有一个，也返回数组

DOM增删改

createElement()

创建元素节点

需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

var li = document.createElement("li") //创建一个新的元素节点

createTextNode()

创建一个文本节点对象

需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

var gzText=document.createTextNode("广州")

appendChild()

把新的子节点添加到指定节点

向一个父节点中添加一个新的子节点

用法：父节点.appendChild(子节点)

将gzText设置为li的子节点

li.appendChild(gzText)

将li设置为页面中city的子节点

var city=document.getElementById("city")

city.appendChild('li')

insertBefore()

在指定的子节点前面插入新的子节点

父节点.insertBefore(新节点，旧节点)

var bj=document.getElementById("bj")

city.insertBefore(li,bj)

replaceChild()

替换子节点

父节点.replaceChild(新节点,旧节点)

removeChild()

删除子节点

父节点.removeChild(子节点)

city.removeChild(‘li’)

最常用：

子节点.parentNode.removeChild(子节点)

不用获取父节点了

修改节点内的HTML代码

用innerHTML

也可以实现增加子节点

如果不想删除原内容则用city.innerHTML+= ...

一般情况下两种方式结合使用

var li = document.createElement("li")

li.innerHTML="广州"

city.appendChild(li)

增删改练习

点击超链接后，超链接会跳转页面，这个是超链接的默认行为，但是我们不希望出现默认行为，可以通过在响应函数（如onclick）的最后return false来取消默认行为
也可以在a标签中定义href属性为 <a href="javascript:;">
alert的内容为3
因为for循环会在页面加载完成之后立即执行，而单击响应函数会在超链接被点击时才执行，当相应函数执行时 for循环早已执行完毕。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #employeeTable {
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
        }

        th {
            padding: 6px;
        }

        td {
            padding: 6px;
        }

        form {
            margin: 0 auto;
            margin-top: 50px;
            height: 200px;
            width: 300px;
            border: 1px solid black;
        }

        h4 {
            text-align: center;
        }

        #sub {
            width: 80px;
            margin-left: 110px;


        }

        li {
            list-style: none;
        }
    </style>
    <script>
        window.onload = function () {
            var emp = document.getElementById('employeeTable')
            //封装点击事件
            function myClick(str, fun) {
                var btn = document.getElementById(str)
                btn.onclick = fun
            }

            // 删除方法


            // 删除按钮点击事件绑定
            function deleteEmp() {
                var del = document.querySelectorAll('.del')
                for (var i = 0; i < del.length; i++) {
                    del[i].onclick = function () {
                        var tr = this.parentNode.parentNode
                        let name = tr.getElementsByTagName('td')[0].innerText
                        var res = confirm("确认删除" + name + "吗？")
                        if (res) {
                            tr.parentNode.removeChild(tr)
                        }
                        return false
                    }
                }
            }
            deleteEmp()

            myClick('sub', function () {
                let name = document.getElementById('name').value
                let email = document.getElementById('email').value
                let salary = document.getElementById('salary').value
                let newEmpTr = document.createElement('tr')
                newEmpTr.innerHTML = "<td>" + name + "</td>" + "<td>" + email + "</td>" + "<td>" + salary + "</td>" + '<td><a href="#" class="del">Delete</a></td>'
                emp.appendChild(newEmpTr)
                deleteEmp()
            })



        }
    </script>
</head>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@tom.com</td>
            <td>8000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>

    </table>

    <form action="">
        <h4>添加新员工</h4>
        <ul>
            <li>name: <input type="text" id="name"></li>
            <li>email: <input type="email" id="email"></li>
            <li>salary: <input type="text" id="salary"></li>
        </ul>
        <button id="sub">submit</button>
    </form>
</body>

</html>