JavaScript基础知识。

DOM ：

Document Object Model 文档对象模型

功能：控制HTML文档的内容。

1、创建：window.document

2、方法：

　　1、获取Element对象：getElementById（）

　　2、创建其他DOM对象：createAttribute（）

Element：元素对象。

　　1、获取：通过document。

　　2、方法：removeAttribute（）删除属性。setAttribute（）设置属性。

Node：节点对象。

　　1、特点：所有DOM对象都可以被认为是一个节点。

　　2、方法：增删改子节点：appendChild（）、removeChild（）、replaceChild（）

　　3、属性：parentNode 返回父节点。

练习：表格的增删。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto    ;
            width: 500px    ;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="id">
    <input type="text" id="name" placeholder="name">
    <input type="button" value="add" id="add">
    <p></p>
</div>
<table  border="1" id="table">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>operate</th>
    </tr>
</table>
<script>
    document.getElementById("add").onclick=function () {
        var id=document.getElementById("id").value;
        var name=document.getElementById("name").value;

        var id_node = document.createElement("id");
        var id_node_value=document.createTextNode(id)
        id_node.appendChild(id_node_value);

        var name_node = document.createElement("td");
        var name_node_value=document.createTextNode(name);
        name_node.appendChild(name_node_value);

        var a_node=document.createElement("td");
        var a_node_value=document.createElement("a");
        a_node_value.setAttribute("href","javascript:void(0)");
        a_node_value.setAttribute("onclick","del(this)");
        var a_value=document.createTextNode("delete");
        a_node_value.appendChild(a_value);
        a_node.appendChild(a_node_value);

        var tr_node=document.createElement("tr");
        tr_node.appendChild(id_node);
        tr_node.appendChild(name_node);
        tr_node.appendChild(a_node);
        var table=document.getElementById("table");
        table.appendChild(tr_node);

    }

    function del(obj) {
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

HTML DOM：

1：标签体的设置和获取：innerHTML

上面的例子可以简化为：

<tr>
        <td>id</td>
        <td>name</td>
        <td><a href="javascript:void(0)" onclick="del(this)"></a></td>
    </tr>

2、控制样式

事件：

1、点击事件：onclick，ondblclick。

2、焦点事件：onblur：失去焦点 onfucus：获得

3、加载事件：onload

4、鼠标、键盘事件：

5、表单事件：onsubmit 返回true就提交、onreset

BOM：

Browser Object Model 浏览器对象模型，将浏览器各个组成部分封装成了对象。

组成：

1、Window：窗口对象。

　　1、特点：不需要创建可直接使用，window.方法（），window也可以省略，方法（）；

　　2、方法：弹出框：alert 警告、confirm 提示、prompt 输入。

　　　　　窗口：close 当前，open（网址）返回新的window对象。

　　3、属性：获取其他BOM对象：history .... 获取DOM对象：

2、Location：地址栏对象。

　　1、创建：location。

　　2、方法：reload（）。

　　3、属性：href，当前网址，href=“去哪儿”。

3、History：历史对象。