4.7JavaScript --DOM

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

DOM模型

1.概念
    目录树。方便定位各个节点上的标签。
2.超类
    Node
    Document
    Element
    HTMLElement
3.访问标签
    通过ID访问HTML标签
        document.getElementByid(idval):返回文档中id属性值为idval的HTML元素。
    通过CSS访问HTML标签
        document.querySelector(selectos)：该方法的参数既可是一个CSS选择器，也可以用逗号隔开的多个选择器。该方法返回HTML中第一个符合选择器参数的标签。
        document.querySelectorAll(selectos)：该方法与上一个方法用法类似，只是返回全部符合CSS选择器的HTML标签。
    通过节点关系访问HTML标签
        首先使用前两种定位器定位标签，之后可以通过关系定位其他标签。
        var cur = document.getElementById("ajax");

        cur.parentNode:返回当前节点的父节点
        cur.previousSibling：返回当前节点的前一个兄弟节点
        cur.nexSibling：返回当前节点的后一个兄弟节点
        cur.childNodes：返回当前节点的所有子节点
        cur.getElementsByTagName：所有当前节点的具体指定标签名的所有子节点
        cur.firstChild：返回当前节点的第一个子节点
        cur.lastChild：返回当前节点的最后一个子节点
    访问表单控件
        定位表单。
        var cur = document.getElementById("ajax");

        cur.action:返回表单的action属性值，用于指定表单的提交地址。
        cur.elements:返回表单内全部表单控件所组成的数组。
        cur.elementName:返回表单中id或者name是elementname的标签。
        cur.length:返回表单内表单域的个数。
        cur.method:返回表单的method属性。
        cur.target:用于确定提交表单时的结果窗口。
        cur.reset()：重设表单。
        cur.submit():提交表单。
    访问列表框、下拉菜单的选项
        定位列表框。
        var cur = document.getElementById("ajax");

        cur.form:返回列表框、下拉框所在的表单对象。
        cur.length:返回列表框、下拉框的选项个数。
        cur.options:返回列表框、下拉框里所有选项组成的数组。
        cur.selectedIndex:返回下拉框中选择选项的索引。
        cur.type:返回下拉框的类型。
        cur.select.options[index]:返回列表框、下拉框的第index+1个选项。
        cur.defaultSelected:返回该选项是否默认被选中。
        cur.index:返回列表框、下拉框中的索引。
        cur.selected:返回该选项是否被选中。
        cur.text:返回该选中中的文本。
        cur.value:返回每个选项的value值。
    访问表格子元素
        定位表格。
        var cur = document.getElementById("ajax");

        cur.caption:返回表格的标题
        cur.rows[index]:返回表格的index+1行，不加index返回整个表格。
        cur.rows[index].cells[index]:返回表格index+1行的index+1格。
        cur.rowIndex:返回该表格行在表格内的索引值。
        cur.tFoot:返回表格内的tFoot元素。
        cur.tHead:返回表格内的tHead元素。
4.修改标签
    我们通过定位标签来讲解。
    var cur = document.getElementById("ajax");

    cur.innerHTML:修改标签内部内容。
    cur.value:修改value值。
    cur.className:修改class样式。
    cur.style:修改style样式。
    cur.options[index]:修改索引值。
5.增加标签
    创建节点
        document.createElement(Tag):创建Tag标签的节点。
    复制节点
        Node cloneNode(boolean deep):deep为True时，表示全复制。为false时，表示复制当前节点。
    添加节点
        appendChild(Node newNode):将newNode添加成当前节点的最后一个子节点
        insertBefore(Node newNode,Node refNode):在refNode节点之前插入newNode节点。
        replaceChild(Node newChild,Node oldChild):将oldChild节点替换为newChild节点。
    增加列表选项
        add(HTMLOptionElement option, HTMLOptionElement before):
    增加表格内容
        insertRow(index):在index处插入一行。
        createCaption():创建标题。
        createTFoot():创建tfoot标签。
        createTHead():创建thead标签。
        insertCell(long index):在index处建立一个单元格。
6.删除标签
    删除节点
        removeChild(oldNode):删除oldChild子节点。
    删除列表选项
        remove(long index):删除指定索引的选项。
    删除表格内容
        deleteROW（long index）:删除指定索引的行。
        deleteCell（long index）:删除指定索引的单元格。
7.windo对象
    方法
        -常用
            alert():弹出警告框。
            confirm():弹出确认警告框。
            prompt():弹出提示输入对话框。
            close():关闭窗口。
            open():打开一个新的顶级窗口。
            setInterval():设置定时器，只执行一次。
            clearInterval():删除定时器。
            setTimeout():设置定时器，循环执行。
            clearTimeout():关闭定时器。
        -不常用
            focus():获取焦点。
            blur():失去焦点。
            moveBy():移动窗口。
            moveTo():移动窗口。
            print():打印当前窗口。
            resizeBy():重设窗口大小。
            resizeTo():重设窗口大小。
            scrollBy():滚动文档。
            scrollTo():滚动文档。
    属性
        -常用
            status:返回浏览器状态
            location:返回装在HTML文档的URL。
                hostname:文档所在地址的主机名。
                href:文档所在地址的URL地址。
                host:文档所在地址的主机地址。
                port:文档所在地址的服务端口。
                pathname:文档所在地址的文件地址。
                protocol:装载该文档的协议。
            navigator:返回当前页面的浏览器。
            screen:返回当前浏览者的屏幕对象。
                width:横向分辨率
                hright:竖向分辨率
                colorDepth:色深
            document:返回装在的HTML文档。
        -不常用
            closed:判断窗口是否处于关闭状态。
            defaultStatus:返回浏览器状态。
            frames[]:返回窗口内包含的所有Frame对象。
            history:返回该窗口的浏览历史。
            name:返回该窗口的名字。
            parent:返回本Frame的父窗口。
            self:返回自身。
            top:返回Frame的顶级父窗口。
8.navigator对象
    appName:浏览器内核名称。
    appValue:浏览器版本号。
    platform:浏览器所在操作系统。
9.document对象
    open():打开一个DOM对象。
    close():关闭一个DOM对象。
    write():向对象内写入一条字符串，不换行。
    writeln():向对象写入一条字符串，换行。
    cookie:读写HTTP的cookie。
    URL:返回DOM所在的URL。