Dom内容汇总

      dom:          获取节点：{              1、document.getElementById(元素id):通过元素id找到节点              2、document.getElementsByClassName(元素类名className): 通过class类名找到节点，返回的是一个集合              3、document.getElementsByTagName(标签名):通过标签名找到节点，返回一个集合  标签名：如<a>\ <p>\ <div> ....              4、document.getElementsByName(name名): 通过带有name属性的标签元素找到节点返回一个集合，              5、document.querySelector():通过css选择器进行查找，id class 标签名，如果查找是多个，返回第一个标签元素              6、document.querySelectorAll():通过css选择器进行查找，id class 标签名;返回的是一个集合          }          通过节点属性获取节点：{              1、firstChild; 父元素.firstChild 获取父元素首个子节点 （包含文本节点 #test）              2、lastChild：父元素.lastChild  获取父元素最后一个子节点 （包含文本节点 #test）              3、childNodes：父元素.childNodes 获取父元素所有的子节点 （包含文本节点 #test）              4、parentNode\parentElement：子节点.parentNode 通过子节点找到父元素              5、previousSibling：兄弟节点.previousSibling 获取已知节点的前一个节点              6、nextSibling：兄弟节点.nextSibling 获取已知节点的后一个节点              7、ownerDocument:属性返回当前节点所在的顶层文档对象(document)              8、textContent:属性返回当前节点和它的所有后代节点的文本内容  -- - - - 忽略当前节点内部的HTML标签              9、nodeValue属性返回或设置当前节点的值，格式为字符串；一般只用于Text节点              10、firstElementChild:返回第一个元素节点              11、lastElementChild:返回最后一个元素节点              12、children:返回所有子元素节点（集合）          }          创建元素节点：{              1、createElement(): document.createElement(元素标签)  创建元素节点              2、createAttribute():document.createAttribute(元素属性) 创建属性节点 <div class="hehehe"></div>                  setAttributeNode():添加一个属性节点              3、createTextNode():document.createTextNode(文本内容) 创建文本节点          }          判断节点子节点：hasChildNodes():表示当前节点是否有子节点          插入节点：{              1、appendChild(): 父元素.appendChild(所添加新节点) 向父元素末尾添加新元素              2、insertBefore():父元素.insertBefore(所要添加的新节点，将被插入的节点位置) 如果第二个参数为null,所添加的                  元素插入在末尾          }          替换节点：replaceChild（要插入的新节点，将被替换的旧节点）          复制节点：cloneNode(): {                  要被复制的节点.cloneNode(true):复制当前节点及所有子节点                  要被复制的节点.cloneNode(false):仅复制当前节点          }          删除节点：removeChild(要删除的节点)：删除指定节点          contains(): 返回boolean值 表示参数节点是否为当前节点的后代节点  document.body.contains(node);          isEqualNode():返回boolean值 检查两个节点是否相等          满足条件：{              1、类型相同              2、属性相同              3、子节点相同          }          属性操作：{              获取属性：getAttribute():                          元素节点.getAttribute(元素属性名)              设置属性：setAttribute()                          元素节点.setAttribute(元素属性名,元素属性值)              删除属性：removeAttribute()                          元素节点.removeAttribute(元素属性名);              检查是否存在的属性名称：hasAttribute()                          元素节点.hasAttribute(元素属性名);          }          style属性{   // background-color --->  backgroundColor              getPropertyValue(属性名):              setProperty(属性名,属性值)              removeProperty(属性名)              cssText('style') 设置或删除样式          }          {  //              textContent():获取元素的文本内容              innerText():获取元素的文本内容              innerHTML():获取元素内容（包含文本、标签元素）          }          innerWidth          innerHeight          clientWidth    var w= document.documentElement.clientWidth || document.body.clientWidth;          clientHeight          offsetWidth          offsetHeight          offsetParent          offsetLeft          offsetTop          改变浏览器位置方法：效果是一样的          1、location.assign('传递一个url');          2、window.location = '传递一个url';          3、location.href = '传递一个url'; <常用>          reload():重新加载当前显示的页面。          location.reload(false):  // 优先从本地缓存重新加载          location.reload(true)://优先从服务器重新加载          document.location.href //返回当前加载页面的URL。          document.location.protocol // 返回页面使用协议http or https          document.location.host // 返回主机名称与端口号          document.location.hostname // 返回主机名称          document.location.port // 返回url指定端口号，如果不存在则返回空字符串          document.location.pathname //返回url中的目录或文件名          document.location.search //返回url中的查询字符串，字符串以问好开始          document.location.assign('http://www.google.com')// 跳转到另一个网址?x=1&y=2          var ss = setInterval(function(){},ms); // 设置定时器          clearInterval(ss); // 取消定时器