JavaScript HTML DOM+事件+节点与元素

1.HTML DOM (文档对象模型)

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
在这里插入图片描述

1.JavaScript 能够改变页面中的所有 HTML 元素
（1）查找 HTML 元素：
通过 id 找到 HTML 元素:document.getElementById("intro");
通过标签名找到 HTML 元素:document.getElementsByTagName("p");
通过类名找到 HTML 元素:document.getElementsByClassName("intro");
(2)JavaScript 能够改变页面中的所有 HTML 属性

改变 HTML 输出流，document.write() 可用于直接向 HTML 输出流写内容。
注意：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容：document.getElementById(id).innerHTML=新的 HTML
改变 HTML 属性：document.getElementById(id).attribute=新属性值，attribute为属性名

2.JavaScript 能够改变页面中的所有 CSS 样式

改变 HTML 样式：document.getElementById(id).style.property=新样式，property为样式名
改变样式可以与点击事件结合使用：

onclick="document.getElementById('id1').style.color='red'"

3.JavaScript 能够对页面中的所有事件做出反应

onload 和 onunload 事件：用户进入或离开页面时被触发
onclick事件：点击时触发
onchange 事件：结合对输入字段的验证来使用
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

2.EventListener句柄，冒泡与捕获

addEventListener() 方法：用于向指定元素添加事件句柄，添加的事件句柄不会覆盖已存在的事件句柄。
语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”)。不要使用 “on” 前缀，使用 “click”
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
将 p元素插入到 div元素中，用户点击 p 元素
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：p元素的点击事件先触发，然后会触发 div元素的点击事件。默认值为 false, 即冒泡传递
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发，然后再触发p 元素的点击事件。当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

3.事件

1.事件流：在页面中接受事件的顺序
2.事件冒泡与捕获;
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：p元素的点击事件先触发，然后会触发 div元素的点击事件。默认值为 false, 即冒泡传递
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发，然后再触发p 元素的点击事件。当值为 true 时, 事件使用捕获传递。
3.事件处理
（1）html事件处理

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
</div>
    <script>
        function  demo() {
            alert("hello，html事件处理");
        }
    </script>

缺点：当需要改动时，需要改动多处
（2）DOM0级事件处理

<script>
    var btn1=document.getElementById("btn1");
    btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序1") } 
    btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序2") }
    btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序3") } 
//最后弹出来的是3,1和2被覆盖掉
    btn1.onclick=null;  //表示内容被清除
</script>

（3）DOM2级事件处理
注：DOM2的布尔值（true、false）已不需要操作

<script>
    var btn1=document.getElementById("btn1");
    btn1.addEventListener("click",demo1);
    btn1.addEventListener("click",demo2);
    btn1.addEventListener("click",demo3);
    function demo1() {
        alert("DOM2级事件处理程序1")
    }
    function demo2() {
        alert("DOM2级事件处理程序2")
    }
    function demo3() {
        alert("DOM2级事件处理程序3")
        // 事件不会互相覆盖，点击确认后依次弹出
    }
    btn1.removeEventListener("click",demo2);
    // DOM2级事件处理程序2被移除
</script>

（4）IE事件处理程序：主要考虑浏览器的兼容

<script>
    var btn1=document.getElementById("btn1");
    if(btn1.addEventListener){            // 如果浏览器支持DOM2级
         btn1.addEventListener("click",demo);
    }else if(btn1.attachEvent){       //如果IE8不能处理，则让处理器处理IE事件
        btn1.attachEvent("onclick",demo);
    }else {                       //如果都不支持，只支持DOM0级事件
       btn1.onclick=demo();
       }
    function demo() {
        alert("hello")
    }
</script>

4.事件处理对象：在触发DOM事件的时候会产生一个对象
(1)type：获取事件的类型
(2)target：获取事件的目标
(3)阻止事件的冒泡
(4)阻止默认事件的发生

<script>
    document.getElementById("btn1").addEventListener("click",showType);
    document.getElementById("div").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);
    function  showType(event) {
        alert(event.type);// 当点击按钮时，弹出当前事件的类型click
        alert(event.target);  // 当点击按钮时，弹出当前事件的目标
        event.stopPropagation(); //阻止事件冒泡，div不再出现
    }
    function  showDiv() {
        alert("div");
    }                //冒泡事件，先弹出button的target，再弹出div的函数target
    function showA() {
        event.stopPropagation();  //阻止冒泡排序
        event.preventDefault();  //阻止默认事件发生，即不允许点击时网页跳转
    }
</script>

4.DOM 元素（节点）

创建新的 HTML 元素 (节点) - appendChild()
创建新的 HTML 元素 (节点) - insertBefore()
移除已存在的元素removeChild()
替换 HTML 元素 - replaceChild()
（1）获取name、获取元素、获取元素属性、设置元素属性、访问子节点

function getName() {
     var  count=document.getElementsByName("pn");
     var  count=document.getElementsByTagName("p");   
     alert(count.length);         //弹出3，说明相同name成为一个集合被存起来
     var  p=count[2];       //获取集合中的数
     p.innerHTML="world";      //页面显示第三个hello被修改
 }
getName();     //获取name

 function getAttr() {
     var  anode=document.getElementById("aid");
     var attr=anode.getAttribute("id");       //获取元素的属性，获取元素的id
     alert(attr);
 }
getAttr();                  //页面弹出一个aid

 function setAttr(){
     var anode=document.getElementById("aid2");
     anode.setAttribute("title","动态设置a的title属性" );
     // setAttribute中第一个表示要被修改的变量，第二个表示被修改以后的值
     var attr=anode.getAttribute("title");
     alert(attr);
 }
 setAttr();

 function getchildNode(){   //子节点
     var childnode=document.getElementsByTagName("ul")[0].childNodes;
     alter(childnode.length);
     //打印子节点的长度，注意列表中元素的书写方式，书写方式不同，长度不同
     alert(childnode[0].nodeType);
     // nodeType 属性返回以数字值返回指定节点的节点类型。
     // 如果节点是元素节点，则 nodeType 属性将返回 1。
     // 如果节点是属性节点，则 nodeType 属性将返回 2。
}
getchildNode();

注意：

<ul> //浏览器认为这个位置还有一个元素
    <li>1</li>
    <li>2</li>
    <li>3</li>
    //所以ul的子节点长度打印结果为7
</ul>

可以通过修改位置

<ul>  <li>1</li><li>2</li><li>3</li>
    //此时ul的子节点长度打印结果为3
</ul>

（2）访问父节点、创建元素节点、插入节点、删除节点、页面尺寸

function getParentNode() {
   var div=document.getElementById("pid");
   //获取p标签的父节点div
   alert(div.parentNode.nodeName);
   //打印节点的名称，弹出结果为div
}


function createNode() {
    var div=document.body;
    var input=document.createElement("input");
    //创建的元素结点的类型；
    input.type="button";
    input.value="按钮";
    body.appendChild(input);
    //插入节点，位置不可调控
}

function addNode() {
    var div=document.getElementById("div");
    var node=document.getElementById("pid");
    var newnode=document.createElement("p");
    //表示要插入一个p元素
    newnode.innerHTML="在动态中添加一个p元素";
    //直接定义这个p元素的内容
    div.insertBefore(newnode,node);
    //第一个表示要插入的元素，第二个表示要插入的相对位置
    //此处将它插入了div与p之间，
}

function  removeNode() {
    var div=document.getElementById("div");
    var p=div.removeChild(div.childNodes[1]);
    //表示删除div中的第二个子节点，即p元素
}

function getSize() {
    var width=document.body.offsetWidth;
    var  width=document.documentElement.offsetWidth;
    //以上两种写法意义相同，考虑了不同浏览器的兼容性
    //scrollwidth指包含滚动条时的长度，offset指不包含滚动条时的长度
}

5. DOM 集合(Collection)和节点列表（NodeList）

1.collection：看起来可能是一个数组，但其实不是一个数组！

var x = document.getElementsByTagName("p");
y = x[1];  //可以获取第二个元素
document.getElementById("demo").innerHTML = myCollection.length;
//显示集合元素个数

2.NodeList 对象：类似 HTMLCollection 对象，getElementsByClassName()返回的是 NodeList 对象，而不是 HTMLCollection 对象。
和collection相似，NodeList 中的元素可以通过索引(以 0 为起始位置)来访问，NodeList 对象 length 属性定义了节点列表中元素的数量。
3.区别
HTMLCollection 是 HTML 元素的集合。NodeList 是一个文档节点的集合（既包括元素，也包括节点）。
【节点(Node)与元素(Element)的区别】：元素是一个小范围的定义，必须是含有完整信息的结点才是一个元素，例如<div>...</div>。但是一个结点不一定是一个元素，而一个元素一定是一个结点。

<div id="parentDiv">
     <!--注释-->
     <div></div>
 </div>
 <script>
     console.log(document.getElementById('parentDiv').childNodes); 
     //节点：NodeList[5]
     console.log(document.getElementById('parentDiv').children) ;  
     //元素：HTMLCollection[1]
 </script>

DOM将文档中的所有都看作节点 node>element：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）
注释是注释节点