DOM增删改查

一、查找

1.不需要查找就可直接获得的元素

html    document.documentElement
head    document.head
body    document.body

2.按节点间关系查找

1.父子关系
elem.parentElement    获得elem的父元素
elem.children    获得elem的所有直接子元素
    返回值：所有直接子元素组成的类数组对象
elem.firstElementChild    获得elem下的第一个子元素
elem.lastElementChild    获得elem下的最后一个子元素
2.兄弟关系
elem.previousElementSibling    获得elem的前一个兄弟元素
elem.nextElementSibling    获得elem的后一个兄弟元素
注意：元素树IE9及以上版本才支持

3.遍历指定父节点下的所有后代节点

节点迭代器：NodeIterator
1.用父节点创建节点迭代器对象：
    var iterator=document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false .SHOW_ELEMENT);
2.反复调用迭代器的nextNode()方法获取下一个节点对象
    nextNode()有两个作用
    1.返回当前节点 2.跳到下一个节点，如果没有后续节点，返回null
do{
    var node=iterator.nextNode()
    if(node!=null)
        console.log(node.nodeName);
    else break;
}while(true)

4.按HTML查找

1.按id查找
    var elem=document.getElememtById("标签名");
    注意：只能用document调用
2.按标签名查找
    var elems=parent.getElementsByTagName("标签名");
    返回动态集合
    注意：1.可在任意父元素上调用，仅在当前父元素下查找
             2.不仅找直接子元素，且查找所有后代中的元素
3.按name属性查找（多用在表单中）
    var elems=document.getElementsByName("name");
    返回动态集合
    注意：只能用document调用
4.按class属性查找
    var elems=parent.getElementByClassName("class");
    返回动态集合
    注意：1.可在任意父元素上调用
          2.不仅找直接子元素，且在所有后代中查找
          3.如果一个元素同时被多个class修饰时，只要按其中一个class，就可找到该元素
    缺点：每次只能按一种条件查找，当查找条件复杂时，步骤就非常繁琐

5.用选择器查找

1.仅查找一个元素
    let elem=parent.querySelector("selector");
2.查找多个元素
    var elems=parent.querySelectorAll("selector");
    注意：1.可以在任何父元素上调用
          2.返回非动态集合（实际存储完整数据，即使反复访问集合，也不会反复查找DOM树）
          3.selector受制于浏览器的兼容性限制

二、修改

1.修改内容

1.获取或修改元素的HTML代码片段内容
    elem.innerHTML
2.获取或修改元素的纯文本内容
    elem.textContent
    去掉了内嵌标签，将转移字符翻译为原文
3.获取或修改表单元素的值
    elem.value

2.修改属性

HTML标准属性：HTML中规定的值为字符串类型的
1.核心DOM
    属性节点都保存在elem的attributes集合中
        var node=elem.attributes["属性名"];
        var value=node.nodeValue;
    获取：var value=elem.getAttribute("属性名")
    修改：elem.setAttribute("属性名","值")
    判断有没有该属性var bool=elem.hasAttribute("属性名")
    移除：elem.removeAttribute("属性名")
2.HTML DOM：专门操作HTML文档的简化版DOM API
    获取：elem.属性名
    修改：elem.属性名=值
    判断有咩有该属性：elem.属性名!=""
    移除：elem.属性=""
注意：class属性
    核心DOM可直接使用class
    HTML DOM必须换为.className=>就是HTML中的class，因为js的对象中已经提前有一个内部属性class，用来记录对象创建时的类型名
3.状态属性：disabled    selected    checked
    特点：值是bool类型，不能用核心DOM操作，只能用HTML DOM操作
4.自定义扩展属性（只要给元素添加行为时，查找元素都用自定义扩展属性）
步骤：
    1.定义data-属性名="值"
    2.获取或设置：2种
        1.核心DOM
        2.HTML5：elem.dataset.属性名

3.修改样式

1.内联样式
特点：优先级最高，当前元素独有
修改：
    1.仅修改一个内联样式
        elem.style.css属性=值
        注意：所有css属性都要去横线边驼峰
            比如：z-index=>zIndex
                    font-size=>fontSize
                    background-position=>backgroundPosition
    2.批量替换内联样式
        elem.style.cssText="…";
获取
    错误: elem.style.css属性
        style仅表示内联样式，无法获得外部样式，丢样式
    解决: 获得计算后的样式（最终应用到当前元素上的所有样式的合集）
    为什么: 一个元素的完整样式，可能来源自多个地方
    何时: 只要获取样式，都要获得计算后的样式！
    步骤: 2步:
        1. 获得计算后的style对象
            var style=getComputedStyle(elem);
        2. 获得style中的css属性值;
            var value=style.css属性;
    注意: 计算后的样式style是只读的，不能修改！

三、添加和删除

1.

1.创建空元素
    var a=document.createElement("a");
        <a></a>
2.设置关键属性
    a.href="http://tmooc.cn";
    a.innerHTML="go to tmooc";
        <a href="http://tmooc.cn">go to tmooc</a>
3.将新元素添加到DOM树
    末尾追加：parent.appendChild(a)
    中间插入：parent.inserBefore(a,child)     将a插入到child之前
    替换：parent.replaceChild(a,child)     用a替换child
优化：尽量减少操作DOM树的次数，因为每次操作DOM树都会导致网页重新 layout
    如果同时添加父元素和子元素时，都要先在内存中将子元素添加到父元素中，最后，再将父元素，一次性添加到DOM树中

2.如果父元素已经在DOM上，要同时添加多个平级子元素时

文档片段：内存中，临时存储一颗dom子树片段的存储空间
1.创建文档片段对象
    var frag=document.createDocumentFragment();
2.先将子元素添加到文档片段中
    frag.appendChild(child)
3.将文档片段一次性添加到DOM树指定父元素下
    parent.appendChild(frag)
    注意：frag将子元素送到dom树后，自动释放

3.HTML DOM常用对象

1.Image
    创建：var img=new Image();
2.Select
    属性：.selectedIndex 快速获得当前选中项的下标位置
         .value 当选中项中有value属性时，返回option的value，如果选中项中没有value属性，则返回内容
3.Option
    创建：var opt=new Option(text,value)
    属性：.index    .text    .value
4.table
负责行分组:
    创建：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()
        在开头插入一行：行分组.insertRow(0)
    删除：行分组.deleteRow(i)
    获取：行分组.rows
负责格：
　　创建：var td=tr.insertCell(i)
　　　　末尾追加：tr.insertCell()

　　删除：tr.deleteCell(i)
　　获取：tr.cells
5.form
    创建：var form=document.forms[i/id/name]
    属性：form.elements  获得表单中所有表单元素的值
        注意：表单元素包括 input    select    textarea    button
        form.elements.length 获得表单中表单元素的个数
        获得表单中倒数第n个表单元素：var btn=form.elements[form.length-n]
    方法：form.submit()  在程序中手动提交表单
表单元素：
    获取：var 表单元素=form.elements[i/id/name]
    方法：elem.focus() 让当前表单获得焦点