2.8DOM节点的学习

Posted 2020-09-05 渡劫的咸鱼哥

1.DOM Document节点
   DOM 全称：
      Document Objcet Model即文档对象模型
      本质：一套用来管理控制html文档的规则
   Document节点是一种具象化的表现形式
      ps:dom节点又被称为document对象（文档对象）
      ps:dom中规定html页面中的所有元素都是节点
2.Document属性
（1）doctype,documentElement,body,head;返回文档内部的某个节点
   【doctype】文档类型/【documentElement】表示当前文档的根节点
      document.doctype返回当前文档的类型
      对于HTML文档来说document对象一般有两个子节点，
         ①第一个子节点是doctype
         ②第二个字节点是documentElement(返回html节点)
            语法：document.doctype/document.Element
         ps:放在script中可用if来判断当前html的版本（兼容性处理时可能用到）
   【body】
      返回当前文档的body或者frameset节点，不存在返回null
      ps:body可写，若写入一个新节点会导致原有节点被删除
   【head】
      返回当前文档的第一个head节点如不存在返回null
（2）documentURL,URL,domain,lastModified,location,title,readyState属性
   【documentURI】&【URL】都表示【当前文档的网址】
      url属性只有html才具有
      ps:IE浏览器目前不支持documentURL属性
      pss:document.documentURI===documentURL//true
   【domain】
      返回当前文档的域名
         语法：document.domain
         例如：
            某张网页的网址是 http://www.example.com/hello.html ，domain属性就等于 www.example.com 。如果无法获取域名，该属性返回null。
         例：
         var baidu = "www.baidu.com";
         if (document.domain === baidu){
            window.close();
         }
         //如果域名是百度，则关闭当前页面
   【lastModifide】
      返回单钱文档（网页）最后修改的时间戳，格式为字符串
      【注】若比较两个字符串时间的先后顺序，则需先转换成Date对象才能比较
         例：if(Date.parse(doc1.lastModifide)>Date.parse(doc2.lastModifide)){//...}
         ps：Date.parse方法能够将时间格式字符串转换成时间戳格式

   【location】
      返回的是一个只读属性，提供了当前文档的URL信息（现用现查）
      例：以下三种写法都可改变当前页面的url
         location.assign(‘传递一个url‘)；
         location.href(‘传递一个url‘)；
         window.href(‘传递一个url‘)；
      例：reload();重新加载当前页面的显示
         location.reload(false);//优先从本地缓存重新加载
         location.reload(true);//优先从服务器重新加载
   【title】
      可以获取当前文档的title值，并且可以对其进行修改 
      document.title=‘新标题‘；
   【characterSet】
      返回渲染当前文档的字符集，
         例：UTF-8、ISO-8869-1
         语法：document.characterSet
   【readyState】
      表示当前文档的加载状态
         三种可能值：
            loading:      加载HTML代码阶段（尚未完成解析）
            interactive:   加载外部资源阶段
            complete:     全部加载完成
   
      // 轮询检查
      var interval = setInterval(function() {
         if (document.readyState === ‘complete‘) {
            console.log(‘now web is loading complete!‘);
            clearInterval(interval);
            // ...
         }
      }, 100);
      ps：setInterval(code,millimSec)可以按照一定时间间隔重复调用代码块，时间间隔单位是毫秒
（3）返回文档内部特定元素的集合
   这些集合都是动态的，原节点有任何变化会立刻反应在集合中
   【anchors】
      返回网页中所有指定了name属性的a节点元素构成的数组
   【forms】
   
3.Document节点操作页面元素（重点）
（1）选中页面元素
   【querSelector()】
      返回匹配指定的css选择器的元素节点。若有多个满足，返回第一个；若无，返回null
      eg:var temp=document.querSelector(‘选择器‘);//".classname","#name"等
   【querSelectorAll】
      返回所有匹配选择器，并构成一个数组返回；无返回null数组（升级版）
   【getElementBy...】系列
      【getElementById()】返回匹配指定ID属性的元素节点
      【getElementsByTagName()】返回所有指定标签的元素
      【getElementsByClassName()】//返回符合指定条件的所有元素
      【getElementsByName()】 用于选择拥有name属性的HTML元素
         ps:无论使用哪种方式进行选择，元素都必须拥有name属性
         pss:执行前页面元素必须被创建
         psss:思考：两者之间的区别
（2）创建页面元素节点，属性
   【creatElement()】生成html元素节点
   语法：document.creatElement("标签名");
   例：
      var newp = document.createElement(“p”);    
      document.body.appendChild(newp);
   因为直接创建一个按钮根本没办法直观看到，因此通过.appendChild方式添加到body当中。.appendChild()方法的作用能够将代码创建的元素添加到指定位置
   【creaTextNode()】生成文本节点，参数为所要生成的文本节点的内容
   ps:文本也是一个节点
   【creatAttribute()】创建一个新的属性节点，并返回它
（3）操作页面元素属性
   【元素节点特性方法getAttribute(),setAttribute()和removeAttribute()】
      语法：
         getAttribute(‘属性名‘);
         setAttribute(‘属性名‘,‘属性值‘);
         removeAttribute(‘属性名‘);
   【元素节点的style属性】
      Element节点本身还提供style属性，用来操作CSS样式
      var divStyle = document.querySelector(‘div‘).style;
      divStyle.cssFloat = ‘left‘;
      divStyle.backgroundColor = ‘red‘;
      【注意事项】
         a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
         b.CSS属性名是javascript保留字的，在属性名之前需要加上字符串“css”
         c.style对象的属性值都是字符串，而且包括单位。
   【元素节点的style属性的cssText写法】
      divStyle.cssText = ‘background-color:red;border:1px solid black;height:100px;width:100px;‘;
         ps：删除整个style属性可以用(divStyle.cssText=‘‘ ‘‘;)这种写法。
         pss：cssText对应的是HTML元素的style属性，所以不用改写CSS属性名
   【元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty() 】
      style对象提供了三个方法来读写行内css规则：
      setProperty(propertyName,value)：设置某个CSS属性。
      getPropertyValue(propertyName)：读取某个CSS属性。
      removeProperty(propertyName)：删除某个CSS属性。
      这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。

      var divStyle = document.querySelector(‘div‘).style;
      divStyle.setProperty(‘background-color‘,‘red‘);
      divStyle.getPropertyValue(‘background-color‘);
      divStyle.removeProperty(‘background-color’);
         思考：如果想要获取一个div的class属性的值，有哪些办法能够实现？