day16-DOM

JavaScript-DOM

1. DOM：文档对象模型；
   • 文档的遥控器；
   • 所谓文档就是html；
   • 在页面之中所有的内容都是html结构；所有的结构都可以使用DOM进行操作
2. DOM是JS之中展现效果时最重要的知识点；
3. DOM学习路线：
   • 选择DOM对象；
     • 每一个html结构都对应一个DOM对象，这个对象的作用就是用来操作这个html结构；
   • 操作DOM对象；
     • 如何操作DOM对象的样式
     • 如何操作DOM对象的属性
     • 如何操作DOM对象的内容
4. DOM很墨迹，有大量超长API
   • 最好可以把单词背下来
   • 我们前期可以使用编辑器提示来完成代码编写

JavaScript-DOM-DOM对象选择器

1. 查找元素对应的DOM对象我们也称之为元素选择；

2. id选择器（通过id查找对象的dom对象）

   • document.getElementById()

     • document表示最大范围，全局进行查找
     • id选择器只能用 document范围

   • API翻译：

     • get：获取
     • element：元素；
     • by：通过
     • ID：id属性；

   • <div id="pox">
         里面装着三个类名为box的div
         <div class="box">类名为box的div</div>
         <div class="box">类名为box的div</div>
         <div class="box">类名为box的div</div>
     </div>
     <div class="box">类名为box的div</div>
     <div class="box">类名为box的div</div>
     <div class="box">类名为box的div</div>
     <div id="box">id名为box的div(同一个id在一个页面上只能有一个)</div>
     <div name="box">name 为box的div</div>
     <div name="box">name 为box的div</div>
     // 1. 查找元素对应的DOM对象我们也称之为元素选择；
     // 2. id选择器（通过id查找对象的dom对象）
     //  - document.getElementById()
     //    - document表示最大范围，全局进行查找
     //    - id选择器只能用 document范围
     //  - API翻译：
     //    - get：获取
     //    - element：元素；
     //    - by：通过
     //    - ID：id属性；
     var box = document.getElementById("box")
     console.log(box)
     // 只有id选择器会选出单个的DOM对象，其他选择器都会进行批量查找
     

3. 类名选择器

   • document.getElementsByClassName();

   • 重要事项：我们要在遍历之后再使用 boxs；不要直接操作 boxs这样是无效的

     • <div id="pox">
           里面装着三个类名为box的div
           <div class="box">类名为box的div</div>
           <div class="box">类名为box的div</div>
           <div class="box">类名为box的div</div>
       </div>
       <div class="box">类名为box的div</div>
       <div class="box">类名为box的div</div>
       <div class="box">类名为box的div</div>
       <div id="box">id名为box的div(同一个id在一个页面上只能有一个)</div>
       <div name="box">name 为box的div</div>
       <div name="box">name 为box的div</div>
       // 3. 类名选择器
       // document.getElementsByClassName();
       // 选中一组元素
       var boxs = document.getElementsByClassName("box")
       // console.log(boxs)
       // 重要事项：我们要在遍历之后再使用 boxs；不要直接操作 boxs这样是无效的
       for(var i = 0 ; i < boxs.length ; i ++){
           console.log(boxs[i])
       }
       

   • 范围限定问题；

     • 所谓范围其实也就是dom对象

     • <div id="pox">
           里面装着三个类名为box的div
           <div class="box">类名为box的div</div>
           <div class="box">类名为box的div</div>
           <div class="box">类名为box的div</div>
       </div>
       <div class="box">类名为box的div</div>
       <div class="box">类名为box的div</div>
       <div class="box">类名为box的div</div>
       <div id="box">id名为box的div(同一个id在一个页面上只能有一个)</div>
       <div name="box">name 为box的div</div>
       <div name="box">name 为box的div</div>
       // 范围限定问题；
       // 所谓范围其实也就是dom对象
       var pox = document.getElementById("pox")
       var pox_boxs = document.getElementsByClassName("box")
       console.log(pox_boxs)
       

4. 标签选择器

   • document.getElementsByTagName();

   • Tag：标签

   • // 4. 标签选择器：
     // document.getElementsByTagName();
     
     var divs = document.getElementsByTagName("div")
     console.log(divs)
     // 获取全部div标签
     

5. qs选择器：需要你有css选择器基础的

   • 范围.querySelector：只会选择一个dom对象

   • 范围.querySelectorAll：无论如何都会以 nodeList(认为这个对象是数组)的形式输出dom对象查询结果

   • 单词翻译：

     • query：查询
     • Selector：选择符

   • // 5. qs选择器：需要你有css选择器基础的
     //  - 范围.querySelector ：只会选择一个dom对象
     //  - 范围.querySelectorAll：无论如何都会以 nodeList(认为这个对象是数组)的形式输出dom对象查询结果
     //  - 单词翻译：
     //   - query：查询
     //   - Selector：选择符
     
     // 根据id选择box ：querySelector
     // var box_id = document.querySelector("#box")
     // console.log(box_id)
     
     // 根据类名选择box ：querySelector
     // var box_class = document.querySelector(".box")
     // console.log(box_class)
     
     // 根据id选择box ：querySelectorAll
     var box_id = document.querySelectorAll("#box")
     console.log(box_id)
     
      // 根据类名选择box ：querySelectorAll
      var box_class = document.querySelectorAll(".box")
     console.log(box_class)
     

JavaScript-DOM-DOM操作

1. DOM操作：
   • 行内样式操作
   • 属性操作
   • 内容操作

JavaScript-DOM-DOM操作-行内样式操作

1. 目标：给id为box的div加是背景色 色值为：yellowgreen

2. 语法：

   • dom.style.属性名 = 属性值；
   • dom.style.cssText = “行内样式值”；

3. 注意：任何DOM操作前，都需要先选择dom对象

4. dom.style.属性名 = 属性值；

   • var box = document.getElementById("box")
     // console.log(box)
     // 前期学习dom操作的时候务必要进行打印验证，确保dom选择没有问题，再进行后续操作
     
     // 如果属性有 - 那么我们用驼峰的方式编写属性，不用 - 号；
     // 属性值一定是字符串或者数字
     box.style.backgroundColor = "yellowgreen"
     // 给元素的宽度设置为200px
     box.style.width = "200px"
     box.style.height = "200px"
     
     // 总结：上面的写法在连续设置行内样式的时候会把连续设置的样式累加；只有同属性名的css样式，不同值的情况下发生覆盖
     

5. dom.style.cssText = “行内样式值”；

   • // dom.style.cssText = "行内样式值"；
     var box = document.getElementById("box")
     // box.style.cssText = "background-color:yellow"
     // box.style.cssText = "width:200px"
     
     // 如果要使用cssText 设置多条css属性，你们我们就需要使用一条字符串来进行表达
     box.style.cssText = "background-color:yellow;width:200px"
     

JavaScript-DOM-DOM操作-属性操作

1. 元素的属性操作

   • 增/改
   • 删
   • 查

2. 增/改：

   • 语法：

     • dom.setAttribute(属性名,属性值);，如果没有属性名及属性值就是增加，有的话则是修改
     • Attribute：属性

   • // 增改
     var pox = document.getElementById("pox")
     pox.setAttribute("class" , "hello" )
     
     // 更改类名的函数
     function foo(){
         pox.setAttribute("class" , "world" )
     }
     setTimeout(foo , 3000)
     // 如果我们较多的样式需要更改我们使用行内样式修改非常复杂，代码啰嗦，所以我们可以把所有的样式封装好放入到类名之中，然后进行属性值的更改/赋值
     

3. 删

   • 语法：

     • pox.removeAttribute(属性名);

   • // 删
     // 语法：pox.removeAttribute(属性名);
     pox.removeAttribute("class");
     

4. 查

   • 根据属性名获取元素对应的属性值

   • 语法：

     • dom.getAttribute(属性名)；

   • 计算结果就是属性对应的属性值

   • //  查
     //   - 根据属性名获取元素对应的属性值
     //   - 语法：
     //      - dom.getAttribute(属性名)；
     //   - 计算结果就是属性对应的属性值
     
     var class_name = pox.getAttribute("class")
     console.log(class_name)
     

5. function qiehua() {
       var pox = document.getElementById("pox")
       var class_name = pox.getAttribute("class")
       if(class_name === "hello"){
           class_name = "world"
       }else{
           class_name = "hello"
       }
       pox.setAttribute("class" , class_name)
   }
   setInterval(qiehua , 1000)
   

JavaScript-DOM-DOM操作-内容操作

1. 输入框类的内容操作：inuput

   • 属性：

     • dom.value 取值
     • dom.value =“值” 赋值

   • // 1. 输入框类的内容操作：inuput
     var ipt = document.getElementById("ipt")
     console.log(ipt)
     function iptValue() {
      ipt.value = "你好世界"
     }
     setTimeout(iptValue , 2000)
     

   • // 逐字打印 "你好世界"
     var str = "你好世界";
     var count = 0;
     var ipt2 = document.getElementById("ipt2");
     function logString(){
         // 如果想要让现有的value和之前的value进行拼接我们只需要在value赋值的时候变成+=
         ipt2.value += str[count];
         count ++;
         if(count >= str.length){
             clearInterval(t);
         }
     }
     var t = setInterval(logString , 500)
     

2. 非输入框类的内容操作；div，span

   • innerHTML

     • 特性：如果我们放入元素之中的字符串结构是符合html规则的，那么就会被浏览器解释成html标签

   • innerText

     • 特性：如果我们在放入元素之中的字符串结构是带有标签结构的，那么innerText会把标签结构进行转义，转义之后会在页面上直接显示标签；在取出数据的时候，只会取出文本部分内容，忽略标签结构

   • // 非输入框类的内容操作
     // innerHTML 特性：如果我们放入元素之中的字符串结构是符合html规则的，那么就会被浏览器解释成html标签
     // innerText 特性：如果我们在放入元素之中的字符串结构是带有标签结构的，那么innerText会把标签结构进行转义，转义之后会在页面上直接显示标签；在取出数据的时候，只会取出文本部分内容，忽略标签结构
     var inner = document.getElementById("lj")
     function jl(){
         inner.innerHTML= "你好世界"
     }
     setInterval(inner , 500)
     

JavaScript-DOM节点-增/删

JavaScript-DOM节点-增

1. 创建一个DOM对象

   • document.createElement(要创建的标签名)

   • //1. 创建一个dom对象
     // document.createElement(要创建的标签名)
     var div = document.createElement("div")
     // 创建出来的dom对象和常规对的dom对象操作是一致的
     div.innerHTML = "hello world"
     console.log(div)
     

2. DOM对象插入页面之中

   • document.appendChild(要被插入的元素)

   • 找到body：我们可以通过 document.body 直接访问body的dom对象

   • 找到html：我们可以通过 document.documentElement 直接访问 html 的dom对象

   • // DOM对象插入页面之中
     // document.appendChild(要被插入的元素)
     // 找到body：我们可以通过 document.body 直接访问body的dom对象
     // 找到html：我们可以通过 document.documentElement 直接访问 html 的dom对象
     
     document.body.appendChild(div)
     

3. appendChild 的特性（重点）

   • 把新元素放入目标元素的最后方

   • 多次调用appendChild 操作同一个元素，只会让元素的位置发生改变，并不会创建更多的相同元素；(一个dom对象值对应一个html结构)

   • var box = document.getElementById("box")
     box.appendChild(header)
     

4. insertBefore(新元素， 放入到目标元素的哪个子元素之前);（了解）

   • 把dom对象放入到某个元素的前方

   • childNodes：可以找到开头的文字属性(了解即可)

   • 我们只需要知道 childNodes[0] 代表元素内部开头部分

   • // insertBefore(新元素， 放入到目标元素的哪个子元素之前);
     // 把dom对象放入到某个元素的前方
     
     var box = document.getElementById("box")
     // childNodes：可以找到开头的文字属性(了解即可)
     // 我们只需要知道 childNodes[0] 代表元素内部开头部分
     box.insertBefore(header , box.childNodes[0] )
     

5. replaceChild();（了解）

   • 元素的替换

   • // 元素的替换
     // replaceChild(新元素 ，替换到目标元素的哪个子元素之前 );
     // 把结构中原有的span替换成新生成的div
     box.replaceChild(header , box.children[0])
     

JavaScript-DOM节点-删

1. dom.remove();

   • // 删除：
     // dom.remove();
     
     function removeBox(){
         box.remove();
     }
     setTimeout( removeBox , 2000)
     

JavaScript-DOM节点-结构关系

1. 所谓DOM结构关系，其实就是用家族关系来描述结构之中的各种包裹关系

   • 父子、兄弟

2. DOM结构的父子关系就是嵌套关系

   • <!-- 父子关系展示 -->
     <div id="parent">
         <div id="child"></div>
         <div id="child"></div>
         <div id="child"></div>
     </div>
     

3. DOM结构的兄弟关系就是同级别关系

   • <!-- 兄弟关系 -->
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     

4. DOM给我们提供了一种除去选择器之外的DOM选择方式，就是根据关系进行查询

5. 根据 parent 元素找到所有的子集元素

   • dom.children 表示查找当前dom对象下所有的子集元素

     • 符合条件的元素会以元素组的形式进行返回；

     • // 5. 根据 parent 元素找到所有的子集元素
       var parent = document.getElementById("parent")
       // 5.1 dom.children 表示查找当前dom对象下所有的子集元素
       //  - 符合条件的元素会以元素组的形式进行返回；
       var children = parent.children
       console.log(children)
       

   • 查找第一个子集元素

     • // 5.2 查找第一个子集元素
       var parent = document.getElementById("parent")
       var first_child = parent.firstElementChild;
       console.log(first_child)
       

   • 查找最后一个子元素

     • // 5.3 查找最后一个子元素
       var parent = document.getElementById("parent")
       var last_child = parent.lastElementChild;
       console.log(last_child)
       

   • 子集元素查找是我们dom关系查找里面最常用的查找方式

6. 查找父级元素

   • dom.parentNode 找到包裹dom对象的元素

   • // 6. 查找父级元素：
     // - dom.parentNode 找到包裹dom对象的元素
     var cwl = document.getElementById("cwl")
     var parent_node = cwl.parentNode;
     console.log(parent_node)
     parent_node.style.border="5px solid green"
     

7. 查找兄弟关系元素-根据box2查找和box2为兄弟关系的box1和box3

   • previousElementSibling：上一同级别元素(兄弟级元素)

     • previous：前一个
     • sibling：兄弟姐妹

   • nextElementSibling：下一个同级别元素

   • // 7. 查找兄弟关系元素
     // - 根据box2查找和box2为兄弟关系的box1和box3
     var box = document.getElementById("box")
     // previousElementSibling：上一同级别元素(兄弟级元素)
     // - previous：前一个
     // - sibling：兄弟姐妹
     var box1 = box.previousElementSibling;
     // nextElementSibling：下一个同级别元素
     var box3 = box.nextElementSibling;
     console.log(box1 , box3)
     

JavaScript-DOM CSS属性获取

1. getComputedStyle
   • 可以获取某个DOM对象对应元素的所有CSS样式
   • 调用 getComputedStyle 会得到对应元素的所有css信息，并且这个信息会以对象的形式呈现出来；
   • 我们通过 box_css[css属性名] 对，对应的属性值进行取出
2. 性能问题：
   • 我们在使用元素css样式获取操作的时候一定越少调用API越好
   • 我们尽量避免多次调用getComputedStyle这样的API，我们尽量在函数之外调用getComputedStyle然后根据数据进行dom操作，计算

JavaScript-DOM节点

1. 节点就是对象的一种特殊称呼
2. DOM称之为节点之后，更多的是对层级，操作进行更多的关注
3. 结构关系：
   • 增删
   • 获取dom对象css信息