学习前端的第三十九天

一、DOM

js的三大组成部分的关系

• ECMAScript规定，如何在BOM中操作DOM

1. 介绍

1. DOM文档对象模型，对象：document

   • DOM（W3C机构）不属于BOM（浏览器厂商）
   • window对象身上有提供document对象
   • DOM，主要控制页面（html文件），所有的页面操作都需要通过DOM
   • DOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）
   • html根元素：head，body
   • DOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）
     • 所有节点，都是对象
   • js做交互，行为，页面（DOM），哪个元素，选择器，属性，内容，样式，元素等等

2. 选择器

   • 元素节点选择器(只有元素节点)

     • 直接选择器

       • id选择器：document.getElementById(“id名”)
       • class选择器：document.getElementsByClassName(“class名”)
       • tag选择器：document.getElementsByTagName(“tag名”)
       • name选择器：document.getElementsByName(“name名”)
       • ES5新增选择器：
         • querySelector选择器：document.querySelector(“css选择器”)
         • querySelectorAll选择器：document.querySelectorAll(“css选择器”)
       • 总结：
         • 返回单个元素：
           • id，querySelector
         • 返回数组：
           • class，tag，name，querySelectorAll

     • 关系选择器：先有基准元素

       • 父子关系
         • 父选子：先拿到父

           // 父选子：先拿到父
           var olist = document.querySelector(".list");
           // var olist = document.getElementsByClassName("list")[0];
           console.log(olist);
           // 第一个子：
           console.log(olist.firstElementChild);
           // 最后一个子：
           console.log(olist.lastElementChild);
           // 所有子：
           console.log(olist.children);
           // 其他的子：
           // console.log(olist.children[索引]);
           

         • 子选父：先拿到子

           // var oEm = document.querySelector("em");
           var oEm = document.getElementsByTagName("em")[0];
           // 子选父：一个！直接的父级！
           console.log(oEm.parentNode);
           console.log(oEm.parentNode.parentNode);
           

       • 兄弟关系

         // 先选择当前
         var olist = document.querySelector(".list");
         

         • 同级的上一个即哥

         // 上一个（哥）：
         console.log(olist.previousElementSibling);
         

         • 同级的下一个即弟

         // 下一个（弟）：
         console.log(olist.nextElementSibling);
         

   • 节点选择器(元素，属性，注释，文本)

     • 元素，注释，文本，参与了父子或兄弟关系

       • 利用关系选择
       • 父元素节点.childNodes
       • 当前元素.previousSibling
       • 当前元素.nextSibling
       • 节点的过滤属性：见1.3

     • 属性，没有参与这种家族关系，更像是元素身上的衣服

       • 单独选择器
       • 当前元素.attributes
       • 节点的过滤属性：见1.3

     • 节点选择器和节点的过滤属性，一般只用来做选择或过滤，不用来做修改等操作，有单独的操作方法

3. 节点的过滤属性

	nodeType	nodeName	nodeValue
元素	1	大写标签名	null
文本	3	#text	文本内容
注释	8	#comment	注释内容
属性	2	属性名	属性值
根document	9	document	null

4. 操作：增删改查
   • 属性操作

     • 可见属性

       • 内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性

         • 对象操作：1点语法；2中括号语法
         • 也可以使用：getAttribute、setAttribute、removeAttribute
         • 特殊的属性：
           • class：要使用className操作
           • style：样式，值是个对象

       • 非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性

         • 元素.getAttribute(“要获取的属性名”)
         • 元素.setAttribute(“要设置的属性名”,“属性值”)
         • 元素.removeAttribute(“要删除的属性名”)

       • 内置的可见属性，有很多，其实就是html属性，不一一列出了（见9html属性介绍.html），只要记住如何操作即可

     • 不可见属性

       • 内置：不用写在标签身上，系统提供，具有功能
         • 对象操作：1点语法；2中括号语法
       • 非内置：看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作
         • 元素是个对象，对象可以用来存储数据，多存储一些
         • 对象操作
         • 注意： 不要和内置的名字重复