JS - 03（DOM）

1. DOM
   - 文档对象模型
   - JS中通过DOM来对html文档进行操作
   1. 文档
      - 表示的就是整个的html网页文档
   2. 对象
      - 表示将网页中的每一个部分都转换为了一个对象
   3. 模型
      - 表示对象之间的关系，方便获取对象
2. 节点（Node）
   - 构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点
   1. 常用节点分类
      1. 文档节点：整个html文档
      2. 元素节点：html文档中的标签
      3. 属性节点：元素的属性
      4. 文本节点：标签中的文本内容

   2. 节点的属性

      	nodeName	nodeType	nodeValue
      文档节点	#document	9	null
      元素节点	标签名	1	null
      属性节点	属性名	2	属性值
      文本节点	#text	3	文本内容

   3. 获取节点的对象

      var btn=document.getElementByID("idName");

3. 事件
   - 就是文档或浏览器窗口中发生的一些特定的交互瞬间，JS与html之间的交互就是通过事件实现的
   - 事件发生后需要有东西去处理事件发生的结果

   1. 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码就会执行
      - 这种方法不推荐使用，会导致结构和行为耦合

   2. 可以为按钮的对应事件绑定处理函数的形式来响应事件
      - 当事件被触发时，其对应的函数将会被调用
      - 为单击事件绑定的函数，我们称为单击响应函数

      btn.onclick=function(){
      alert("");
      }

4. 文档的加载

   1. 浏览器在加载一个页面的时候，是自上向下的顺序加载的，读取到一行就运行一行，如果需要对某一个对象添加响应函数，需要将script标签添加在这个对象的后面，而不是直接写在head里面

   2. 将JS代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行JS代码

   3. 事件：

      1. onload
         - 该事件会在整个页面加载完成之后才触发
         - 可以使用的对象：image/window/
         - 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

5. DOM查询

   1. 获取元素节点
      - 通过document对象调用
      - innerHTML这个属性就是节点对象的文本内容，是用于获取元素内部的HTML代码的，即两个<> <>中间部分的文本，如果该标签为单标签则无法获取
      - innerText可以获取到元素内部的文本内容，会自动将html标签去除
      - 如果需要读取元素节点的属性，可以使用元素.属性名的方式进行读取，注意class属性不能采取这种方式读取，如果需要读取class元素需要采用元素.className这种方式进行读取

      1. 方法

         1. getElementById()
            - 通过id属性获取一个元素的节点

         2. getElementsByTagName（）
            - 通过标签名获取一组元素节点对象
            - 这个方法会返回一个类数组对象，所有查找的对象会封装到对象中(以数组的形式展现，如果需要弄出来单独的元素可以用下标的方式展示）

            1. 属性

               1. childNodes：表示当前节点的所有子节点
                  - 会获取包括元素和文本在内的所有子节点
                  - DOM标签内的空白也会当成子节点

               2. children:当前节点的所有子元素

               3. firstChild：表示当前节点的第一个子节点

               4. lastChild：表示当前节点的最后一个子节点

               5. parentNode：表示当前节点的父节点

               6. previousSibling：表示当前节点的前一个兄弟节点

               7. nextSibling：表示当前节点的后一个兄弟借点

         3. getElementsByName（）
            - 通过name属性获取一组元素节点对象

         4. getElementsByClassName()
            - 可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

         5. querySelector()
            - 选择器
            - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
            - 例子：获取class为box1中的所有div

            var div1=document.querySelector(".box1 div");

            - 这种方法比上面的ByClassName更佳灵活
            - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，只会返回第一个满足条件的元素

         6. querySelectorAll()
            - 该方法和上面的方法用法类似
            - 不同的是会将符合条件的元素封装到一个数组中并且返回数组

         7. document的属性

            1. 在document中有一个属性body，它保存的是body的引用（如果想要获取body标签可以使用)

               var body=document.body;

            2. 里面还有一个属性documentElement，保存的是html根标签

               var html=document.documentElement;

            3. all属性，保存的是页面中所有的元素

6. DOM增删改减

   1. document.createElement()
      - 可以用来创建一个元素节点对象
      - 需要一个标签名作为参数，将会根据标签名创建元素节点对象
      - 将创建好的对象作为返回值返回

   2. document.createTextNode()
      - 可以用来创建一个文本节点对象
      - 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

   3. appendChild()
      - 向一个父节点添加一个新的子节点
      - 用法：父节点.appendChild(子节点)

   4. insertBefore()
      - 在指定的子节点前面插入新的子节点
      -用法：父节点.insertBefore(新节点，旧节点)；

   5. replaceChild()
      - 用指定的子节点替换另一个子节点
      -语法：父节点.replaceChild(新节点，旧节点);

   6. removeChild()
      - 可以删除一个子节点
      - 语法：父节点.removeChild(子节点);
      - 代替方法：bj.parentNode.removeChild(bj);-------更加方便

7. 添加删除修改记录
   - 点击超链接以后，超链接会默认跳转页面，如果此时我们不希望出现默认行为，可以通过在响应函数的最后使用return false来取消默认行为

   1. confirm()
      - 用于弹出一个带有确认和取消按钮的提示框
      - 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
      - 如果用户选择确认，返回ture，如果用户选择取消，返回false，所以需要一个变量来接受用户选择结果

8. 操作内联样式

   1. 通过JS修改元素的样式：
      - 语法：元素.style.样式名=样式值
      - 注意：如果css样式名中含有-，这种名称在js中是不合法的，需要将这种样式名修改为驼峰命名法
      - 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果样式中写了！important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式

   2. 通过JS读取元素的样式
      - 语法：元素.style.样式名
      - 通过style属性设置和读取的都是内联样式，和通过style标签设置的样式不是一样的，所以通过属性无法读取style标签里面的样式

      1. 读取标签里样式
         - 语法：元素.currentStyle.样式名
         - 可以用来读取当前元素正在显示的样式（不局限于内联样式）
         - 这种方法只有IE浏览器支持，其他浏览器不支持
         在其他浏览器中可以使用getComputedStyle()方法来获取元素的样式
         - 这个方法是window的方法，可以直接使用
         - 需要两个参数 第一个：要获取样式的元素 第二个：可以传递一个伪元素，一般是null
         - 该方法会返回一个对象，对象中封装了当前元素对应的样式，如果需要读取某一个属性，就在后面加.属性名

      2. 上面两种方法都是只读的，如果想要修改style需要通过getStyle（）函数来修改

      3. getStyle()

         1. function getStylr(obj,name){
                //正常浏览器的方式
                return getComputedStyle(obj,null)[name];
                //IE8的方式
                return obj.currentStyle[name];
            }

   3. 其他样式的属性

      1. element.clientWidth
         - 返回元素的可见宽度
         element.clientHeight
         - 返回元素的可见高度
         这些属性都是不带px的，返回的是一个数字，可以直接进行计算
         - 获取的数值包括内容区和padding值
         - 这个属性是只读的，不能用来修改样式

      2. offsetWidth
         offsetHeight
         - 可以获取元素的整个大小，包括内容区，padding和border
         - 只读，不包括px，返回数值

      3. offsetParent
         - 返回元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素，如果祖先元素都没有开启定位的话，则会返回body
         - 有点像获取父节点，但是父节点必须是开启了定位的（即positioin值不是static的）

      4. offsetLeft
         - 当前元素相对于其定位父元素的水平偏移量
         offsetTop
         - 当前元素相对于其定位父元素的垂直偏移量

      5. scrollHeight
         scrollWidth
         - 可以获取元素整个滚动区域的高度，包含隐藏高度，clientHeight则是可见的高度
         scrollLeft
         - 可以获取水平滚动条的距离
         scrollTop
         - 可以获取垂直滚动条的距离
         scrollHeight - scrollTop = clientHeight

      6. onscroll
         - 该事件会在元素的滚动条滚动时触发