概念：

DOM：文档对象模型

1. 浏览器提供了文档节点，
2. dom对象是window的属性，可以直接使用
3. 文档节点代表整个网页(document)

组成三要素：

事件 事件源 事件处理程序

1. 事件源，即事件被触发的对象（某个元素）
2. 事件类型，即如何触发
3. 事件处理程序，通过一个函数赋值的方式完成

执行事件的步骤：

1. 获取事件源
2. 注册事件（也称绑定事件）

3. 添加事件处理程序

   基本示例：

   window.onload = function() {
        //就这么写     //window可以不写
            var btn = window.document.getElementById("btn");
                            //事件源
               btn.onclick = function() {
                            //事件
                      btn.innerHTML = "百度一下";
                            //事件处理程序
            }
        }

<button id="btn" type="button"> 点击</button>

获取事件源(选择节点)

使用document.的方式来使用下面的方法，它们都有返回值需要变量接收，可以通过得到返回值的变量继续调用方法来二级查询

• getElementById("idname") ----根据元素id获取元素节点（常规在处理事件源时使用）
• getElementsByTagName(“p”)----根据标签名称获取所有元素节点 注意：返回值是集合
• getElementsByClassName() 获取相同class属性的节点列表（ IE8及以下不支持）
• getElementsByName()------获取指定名称的节点列表 注意：不是所有标签都有name属性

    var btn01 = document.getElementById("btn01");
    //通过html标签内定义的‘id’值来查询并将值返回给变量
    var list = document.getElementsByTagName("li");
    //查询页面内所有的‘li’标签，并将值返回给变量（返回值是集合）
    var byName = document.getElementsByName("gender");
    //查询html标签内定义的‘name’值来查询并将值返回给一个集合
    ----------------------------------------------
    
    //通过二级查询来获取id为‘city‘下的’li‘元素：
    var city = document.getElementById("city");
    //查询id为‘city’下的所有元素返回给‘city’集合
    var lis = city.getElementsByTagName('li');
    //通过返回的’city‘集合来查询其下的所有’li‘标签内容
    

事件类型

事件处理程序

• innerHTML:获取标签内部的代码。需要闭合标签，对于自结束的标签无意义。
• .innerText:获取元素文本内容.
• 获取的元素节点，可以直接使用 元素.id，元素.name,元素.value。
• .className 获取class属性的值
  <br/>
• .childNodes 获取当前节点的所有子节点(有返回值，类型为集合)(包括空文本)
• .children：获取当前节点的所有子元素(有返回值，类型为集合)(不包括空文本)
  <br/>
• .firstChild:获取当前元素下的第一个子元素(包括空文本)

• .firstElementChild:获取当前元素的第个一子元素(不包含空文本)

  • 也可以使用集合.childNodes[0]来获取第一个元素，此方法可以方便的获取指定元素

  <br/>

• .parentNode.innerHTML｜.parentElement.innerHTML返回当前的直接父元素，两个方法无区别，用哪个都行
• .parentNode.innerText｜.parentElement.innerText返回当前的直接父元素内的内容，两个方法无区别，用哪个都行
• .parentNode.parentElement组合使用，可以获取父节点的父节点内的元素

        var byName = document.getElementsByName("gender");
                    for (var i = 0; i < byName.length; i++) {
                        console.log(byName[i].value);
                        //遍历输出标签‘name‘为“gender”的所有值
                        console.log(byName[i].innerHTML);
                        //遍历输出标签‘name‘为“gender”的内部代码
                    }

DOM的增删改

方法：

创建

• .createElement()创建元素节点对象

  • 以标签名作为参数
  • 创建元素对象作为返回值

• .createTextNode()创建文本对象

  • 需要文本作为参数
    <br/>

添加

• .appendChild将子元素对象添加到父元素中

  • 子元素作为参数

• .insertBefore()将创建的节点对象添加到指定节点之前

  • 父节点.insertBefore(新节点，旧节点)
    <br/>

修改(替换)

• .replaceChild():将创建的节点对象替换指定节点

  • 父节点.replaceChild(新节点，旧节点)
    <br/>

删除

• .removeChild():删除指定节点

  • 父节点.removeChild(子节点)

  示例

  //html部分：
    <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>
                
        <div><button id="btn1">我是一个按钮</button></div>
                                    ·······
                
  //js部分：
        window.onload=function(){
        
               var btn1=document.getElementById("btn1");
                        var city=document.getElementById("city");
        
        btn1.onclick=function(){
             var liObj=document.createElement("li");
                     //创建元素节点对象
             var text=document.createTextNode("广州");
                    //创建文本对象
                 liObj.appendChild(text);
                 //将文本对象添加到‘li’的子节点中
                 city.appendChild(liObj);
                 //将li元素节点添加进‘city’下
        
                 var bj =document.getElementById("bj");
                    //创建元素节点对象
                 city.insertBefore(li,bj);
                    //将‘li’添加到‘bj’前面
        
                 city.replaceChild(li,bj);
                  //在city父节点下，使用‘li’节点替换‘bj’节点
        
                 city.removeChild(bj);
                  //在city父节点下删除‘bj’节点
          }
     }