JavaScript_DOM

什么是DOM：Document Object Model。专门操作网页内容的API。

DOM树

浏览器在读取网页内容时，自动在内存中创建DOM树。

根节点：一个网页只有唯一的一个树根节点：文档

所有网页内容都包含在文档对象下。

节点对象：网页中每项内容（内容，属性，文本）都是一个节点对象。

    所有节点对象都有的三个属性。

        节点类型：节点类型：用数字代表节点类型

        nodeName：节点名称进步步判断节点名称，标签名必须全部大写

        的nodeValue：节点值

查找：4种方式

1.无需查找即可直接获得的4种节点

    document.documentElement html

    文件头部

    document.body身体

    document.forms [id / i]表单

2.按节点间关系查找

    父子：

        elem.parentNode获取elem的父节点

        elem.childNodes获取elem的所有直接子节点

        elem.firstChild获取elem的第一个直接子节点

        elem.lastChild获得elem的最后一个直接子节点

    兄弟：

        elem.previousSibling前一个兄弟

        elem.nextSibling下一个兄弟

    父子：

        node.parentElement获得节点的父元素

        node.children获得节点的所有直接子元素

        node.firstElementChild获得节点的第一个直接子元素

        node.lastElementChild获得节点的最后一个直接子元素

    兄弟：

        node.previousElementSibling获得节点的前一个兄弟

        node.nextElementSibling获得节点的下一个兄弟

3.按HTML查找：

        按ID查找

            var elem = document.getElementById（“id”）;

        按标签名查找

            var elem = parent.getElementByTagName（“标签”）;

        按名称属性查找

            var elem = document.getElementsByName（“name”）;

        按类属性查找

            var elem = document.getElementsByClassName（class）;

4.按选择器查找：

            var elem = parentquerySelector（“选择器”）;

            var elem = parentquerySelectorAll（“选择器”）;

修改

    内容：

            elem.innerHTML = “值”;

            elem.textContent = “”;

            elem.value = “”;

    属性

        DOM核心API

            elem.getAttribute（ “属性名”）;获取

            elem.setAttribute（ “属性名”， “属性值”）;修改

            elem.hasAttribute（ “属性名”）;判断有没有这条属性

            elem.removeAttribute（ “属性名”）;删除

        HTML DOM

            ELEM “属性名”;获取

            ELEM “属性名”= “属性值”;修改

            ELEM “属性名” == “”;！判断

            ELEM “属性值”= “”;。删除

            elem.className = “类”;

            三大状态属性：disabled：checked：selected不能用DOM核心API，可以用HTML DOM直接访问

        自定义扩展属性

            定义：HTML中<ANY data-属性名=“值”> </ ANY>

            访问：elem.dataset属性名;

    样式

        内联样式

            修改：

                elem.style.css属性= “值”;

                强调：CSS属性名去横线变驼峰

                elem.style.fontSize = “值”;

            获取：var style = getComputedStyle（elem）; style.css的属性;

        共享样式

                varsheet = document.styleSheets [I]; 获得样式表对象

 

                var rule = sheet.cssRules [i]获得样式表对象中的规则

                如果是修改关键帧中的CSS属性，则还要继续找下级cssRule指定规则

                var subRule = rule.cssRules [i]获得样式表对象中的规则

                rule.style.css属性=值修改规则中的css属性

    添加/删除

          创建空元素

                var elem = document.createElement（“标签名”）;

          添加必要属性

                elem.setArrtibute（ “属性名”， “属性值”）;

          将新元素添加到指定父元素下

                parent.appendChild（ELEM）; 将新元素ELEM追加到父的所有子元素之后

                parent.insertBefore（elem，child）将新元素elem插入到parent下现有child元素之前
                parent.replaceChild（elem，child）用新元素elem代替parent下现有child元素

          应用文档片段：添加多个平级子元素

                var frag = document.createDocumentFrament（）;创建文档片段

                frag.appendChild（孩子）;将子元素添加到文档片段中

                parent.appendChild（FRAG）;将文档片段一次性添加到父元素上

        删除

                parent.removeChild（孩子）; child.parentNode.removeChild（孩子）;

    HTML DOM常用对象：

                图像创建：var img = new Image（）;

                选择/选项

                选择：

                    属性：

                        .selectedIndex获得select中当前前中中的选项的位置

                        .options获得select下所有选项的集合

                        .options.length获得select下所有选项个数

                        options.lenght = 0; 清空所有

                    方法：

                        。新增（可选）;代替的appendChild（）; 不支持片段/卸下摆臂（I）

                选项：

                    创建：

                        var opt = new Option（text，value）;

                    属性：...

                表/...

                     添加行分组：

                            var thead = table.createTHead（）;

                            var tbody = table.createTBody（）;

                            var tfoot = table.createTFoot（）;

                      删除行分组：

                            table.deleteTHead（）;

                            table.deleteTFoot（）;

                       获取行分组：

                             table.thead;

                             table.tfoot;

                             table.tbodies [I];

                      行分组管着行：

                            创建：var tr =行分组.insertRow（i）; 在末尾追加新行.insertRow（）;在开头插入.insertRowe0）;

                            删除：行分组.deleteRow（ⅰ）;无法获得I，改善：table.deleteRow（tr.rowIndex）;

                            获得：行分组.rows [I];

                      行管着格：

                            创建：var td = tr.insertCell（i）; 在末尾追加新格tr.insertCell（）;强调：只能创建TD不能创建第

                            删除：tr.deleteRow（ⅰ）;

                            获取：tr.cells [i];

                表格/元

 

                            获取：var form = document.forms [i / id / name];

                            属性：

                                  .elements获得表单中的所有表单元素

                                  .elements.length获得表单中表单元素的个数

                                  .length => .elements.length

                            方法：

                                  .submit（）手动提交

                                  .reset（）重置

                

               表单元素：

                           获取：var表单元素= form.elements [i / id / name]

                           如果表单元素有名属性可：form.name

                           （）让elem失去焦点。