2.8DOM节点的学习

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属性的值，有哪些办法能够实现？