DOM和BOM的基础知识

目录

1. js组成

2. DOM

   1. DOM是什么
   2. DOM节点是什么
   3. 查找DOM节点,查看DOM节点的属性和样式
   4. 添加DOM节点
   5. 删除DOM节点
   6. 修改DOM节点(修改属性,修改样式)

3. BOM

   1. 什么是BOM,什么是宿主对象
   2. bom常见api
      1. Json转换
      2. userAgent
      3. 编码解码
      4. history对象
      5. location对象
      6. ajax

JS的组成

1. ECMAScript(javascript) 的基础语法

   1. 变量
   2. 语句
   3. 函数
   4. 内置对象

2. DOM文档对象模型

3. BOM浏览器对象模型

JS的作用

1. 数据传输
2. 处理数据
3. 展示数据

DOM

1. DOM是什么

   1. 全称Document Object Model(文档对象模型),简称DOM,是一套操作HTML和XML文档(文件)的API

   2. 学习DOM就是学习封装好的操作页面的API(应用程序接口)，Application programming interface 就是一些封装好的方法

2. DOM节点是什么

   1. DOM是由DOM节点(文档节点)组成
   2. HTML 文档中的所有内容都是节点
      1. 整个文档是一个文档节点
      2. 每个 HTML 元素是元素节点
      3. HTML 元素内的文本是文本节点
      4. 每个 HTML 属性是属性节点
      5. 注释是注释节点

3. 查找dom节点,查看dom节点的属性和样式

   1. 查找节点
      1. document.getElementById() 通过标签的Id获得的是唯一的页面标签对象
      2. document.getElementsByTagName() 通过标签(元素)名,得到一个标签对象的数组
      3. document.getElementsByClassName() 通过标签的类名:在JS中不推荐使用这种方式，因为有兼容性的问题
      4. H5的获取元素节点： document.querySelector("")
      5. H5的获取元素节点： document.querySelectorAll("")
      6. 注意：DOM对象的属性和标签的属性几乎是一模一样的，用DOM的方法获得的标签对象就是DOM对象,使用dir可查看和比较
   2. 查看属性 var dom = document.querySelect('#app');
      1. 获取属性值（可以获的自定义属性的值）：dom.getAttribute(name) dom.xxx(比如dom.checked)
      2. 获取class的值 dom.className(得到的是字符串) dom.classList(得到的数组)
      3. dom.style.xxx 比如dom.style.color,dom.style.fontSize(仅限内联样式,font-size要写成fontSize)
      4. getComputedStyle(dom).color (任意式都可以), ComputedStyle => 有所有样式叠加之后的样式
   3. 查看dom 节点内容和亲戚节点
      1. dom.innerText dom节点的内容,不包含标签
      2. dom.innerHTML dom节点的内容,包含标签
      3. dom.parentNode： 获取dom节点的父节点
      4. dom.children: 获取dom节点的子节点，是一个数组
      5. dom.nextElementSibling : 获取dom的下一个元素节点
      6. dom.nextSibling ：获取dom的下一个节点（包括元素节点）
      7. dom.previousSibling dom.previousElementSibling 同上

4. 添加节点

   1. createElement创建节点
   2. cloneNode克隆节点
   3. appendChild追加节点到某个元素后
   4. insertBefore在元素前面添加节点

   // 添加节点

   <script>
       var box = document.getElementById("box");
       // 创建一个ul节点
       var ul = document.createElement("ul"); // 创建的是一对标签
       box.appendChild(ul);// 将创建出来的ul标签追加到box中
       var  li = document.createElement("li"); // 创建的一个标签对象
       ul.appendChild(li);
       li.innerHTML = "这是新添加的内容";
   </script>
   

// 克隆节点

<script>
    //var li11 = dom.cloneNode(false); // 如果参数是false的话，表示浅度克隆，只克隆标签，不会克隆标签之间的内容
    var li11 = li1.cloneNode(true);// 如果参数为true的话，表示 深度克隆，会克隆标签内的一切内容
    // var li11 = li1.cloneNode();// 如果不写参数的话，与false一致
    //  console.log(li11);
    // 可以将克隆出来的内容追加到任何一个节点上
    // appendChild
    ul.appendChild(li11);  // 在当前父级元素的最后，追加一个克隆出来的标签节点
    console.log(ul);
</script>

5. 删除节点

   1. m.removeChild(n)删除m元素中的n节点
   2. m.remove(); 删除自己(自杀)

6. 修改dom节点 var dom = document.querySelector('#app');

   1. 修改dom节点的内容
      1. dom.innerText = '前端工程师';
      2. dom.innerHTML = <button>前端工程师</button>;
   2. 修改属性 dom.setAttribute(name, value)
   3. 修改样式
      • dom.style.border = "1px solid red"
      • dom.style.backgroundColor = "yellow"
   4. 修改class
      • dom.className = 'aaa'; 给元素添加一个加aaa的class
      • dom.classList.add() | remove() , 添加或者删除，返回的是一个类名数组