1.什么是DOM

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
整个DOM体系可以用一棵DOM树来表示。
DOM树是由一个个节点组成
三、DOM - 图1
上图可知，在HTML中，一切都是节点；

  • 元素节点：Html标签（nodeType==1）
  • 属性节点：标签的属性（nodeType==2）
  • 文本节点：标签中的文字（nodeType==3）

2.DOM节点和访问关系的获取

dom节点的获取

  1. <p name="test" class="one" id="only-id">hello world</p>
  2.     <script>
  3.         var onlyid = document.getElementById("only-id");//通过id获取单个标签
  5.         //以下四种方式获取到的都是集合
  6.         var one = document.getElementsByClassName("one");
  7.         var p = document.getElementsByTagName('p');
  8.         var test = document.getElementsByName("test");
  10.         //querySelectorAll方法就就和选择器一样，是class就用.xxx,是id就用#xxx
  11.         var query = document.querySelectorAll("#only-id")
  12.     <script>

dom访问关系的获取

dom的节点并不是孤立的，因此可以通过dom节点之间的相对关系对它们进行访问。js中的父子访问关系如下：
三、DOM - 图2
1.获取父节点
调用者就是一个子节点，一个节点只有一个父节点，调用方式为

  1. var parent = 节点.parentNode;

2.获取兄弟节点

  1. var sibling1 = 节点.nextSibling;//获取下一个节点（包括标签，空文档，文本节点）
  2. var sibling2 = 节点.nextElementSibling;//获取下一个元素节点
  3. //next表示后面的，前面的用previous，用法同理

3.获取单个子节点

  1. var firstchild1 = 父节点.firstChild;//获取下一个节点
  2. var firstchild2 = 父节点.firstElementChild;//获取下一个元素节点
  3. //first表示第一个，最后一个用last，用法同理


4.获取所有的子节点

  1. var 子节点数组1 = 父节点.childNodes;//获取所有子节点，用的少
  2. var 子节点数组2 = 父节点.children;//用的最多，得到了几乎所有游览器的支持

3.DOM节点的操作

上面讲了节点的访问关系都是属性。本段讲节点的操作都是函数。

创建节点

格式：var 要创建节点名 = document.createElement(“标签名”);

  1. //例如我们想要创建li标签
  2. <script type="text/javascript">
  3.     var a1 = document.createElement("li");   //创建一个li标签
  4.     var a2 = document.createElement("adbc");   //创建一个不存在的标签
  6.     console.log(a1);
  7.     console.log(a2);
  9.     console.log(typeof a1);
  10.     console.log(typeof a2);
  11. </script>

控制台输出结果：
image.png

插入节点

插入节点有两种方式，它们的含义是不同的
方式1：

  1. 父节点.appendChild(新的子节点);    //父节点的最后插入一个新的子节点

方式2：

  1. 父节点.insertBefore(新的子节点,作为参考的子节点);
  2. //在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点

修改节点

  1. 父节点.repalceChild(新的子节点,老的被替换的节点)

删除节点

格式如下：

  1. 父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果想要自己删除自己，可以这么做：

  1.    node1.parentNode.removeChild(node1);

复制节点

格式如下：

  1.     要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。
  3.     要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

  • 不带参数/带参数false：只复制节点本身，不复制子节点。
  • 带参数true：既复制节点本身，也复制其所有的子节点。

设置节点属性

1.获取节点的属性值

  1. 元素节点.getAttribute("属性名称");

举例：

  1. <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
  3.     <script>
  4.             console.log(myNode.getAttribute("src"));
  5.             console.log(myNode.getAttribute("class"));   //注意是class，不是className
  6.             console.log(myNode.getAttribute("title"));
  7.     </script>

2.设置节点的属性值

  1. 元素节点.setAttribute(属性名,属性值);
  2. //举例(设置节点的属性值)
  3.    myNode.setAttribute("src","images/3.jpg");
  4.     myNode.setAttribute("class","image3-box");
  5.     myNode.setAttribute("id","你好");
  7. //注意，两个值都需要用引号包着

3.删除节点的属性

  1. 元素节点.removeAttribute(属性名);

4.DOM事件（event）

JavaScript与HTML之间的交互通过事件实现的

  1. onclick
  2. onfocus
  3. onblur
  4. onmouseover  //鼠标移到某元素之上
  5. onmouseout  //鼠标从某元素移开
  6. onload页面加载时触发
  7. onchange域的内容改变时发生
  8. onsubmit//表单中的确认按钮被点击时发生
  9. //有事件一定有对应一个处理结果，用函数表示
  10. onresize//浏览器的尺寸发生改变
  11. onscroll //窗口滚动
  12. onchange事件支持的标签input,select,textarea

键盘事件与keycode属性

  1. onkeydown:用户按下一个键盘按键时发生
  2. onkeypress:在键盘按键按下并释放一个键时发生
  3. onkeyup:在键盘按键松开时发生
  4. keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

事例

  1.       /* 键盘松开的时发生的事件 */
  2.         input.onkeyup = function(event){
  3.             /* keycode返回一个键盘码 */
  4.             if(event.keyCode == 13){
  5.                 /* 只要是对象的属性,都可以通过点的方式去获取值 */
  6.                 console.log(this.value)
  7.             }

窗口滚动onscroll

事例

  1.     <div class="nav" id="nav">导航</div>
  2.     <script>
  3.         /* onscroll 滚动事件 */
  4.         var nav = document.getElementById("nav")
  5.         window.onscroll =  function(){
  6.             /* 获取滚动条距离顶部的高度 */
  7.             var scrollTop = document.documentElement.scrollTop;
  8.             /* 当滚动条距离顶部的高度达到300时候完全显示 */
  9.             var opacity = scrollTop/300;
  10.             if(opacity>1){
  11.                 opacity = 1
  12.             }
  13.             nav.style.opacity = opacity;
  14.             nav.style.backgroundColor = "red"
  15.         }
  16.     </script>

onload

  1.         window.onload = function(){
  2.             var input = document.getElementById("input");
  3.             input.onchange = function(event){
  4.                 console.log(this.value)
  5.             }
  6.         }
  7.                /* 
  8.         onload 等DOM树以及图片相关资源加载完毕,再执行函数中的代码
  9.          */