JS常用API合集-节点篇

节点

Dom树由节点构成，节点分为多种类型,又有不同的方法

 #节点属性:
  Node.nodeName;//节点的名称
  Node.nodeType;//节点类型
  Node.nodeValue;//节点文本值
  Node.children;//获取子元素集合
  Node.parentElement;//获取父元素
  Node.nextElementSibling;//下一个元素
  Node.previousElementSibling;//上一个元素
  Node.lastElementChild;//最后一个元素
  Node.firstElementChild;//第一个元素

 #常用操作:
  Node.appendChild();//添加子节点
  Node.hasChildNodes();//是否包含子节点
  Node.cloneNode();//复制节点
  Node.insertBefore();//在之前插入
  Node.removeChild();//移除子节点
  Node.replaceChild();//替换子节点
  Node.contains();//是否包含子节点
  Node.remove();//移除自身

Document节点

document是documentHTML的一个实例，也是window对象的一个属性，因此可以将document作为一个全局对象来访问。

# Document节点的属性:
 document.documentElement;//html
 document.head;//head
 document.body;//body
 //节点集合属性
 document.links;//文档中 所有A标签
 document.images;//文档中 所有图片元素
 document.scripts;//文档中 所有脚本
 document.forms;//文档中 所有表单元素
 document.styleSheets;//文档中 所有样式表
 //文档信息属性
 document.Url;//文档网址
 document.location;//文档location对象
 document.title;//文档标题
 document.cookie;//操作cookie

# Document节点的方法:
> 读写方法:
  document.open();//新建并打开文档
  document.close();//关闭当前文档
  document.write();//向当前文档中写入内容
  document.writeln();//向当前文档中写入内容并还行

> 查找节点:
  document.querySelector();//传入一个css选择器,返回第一个匹配该选择器的元素节点
  document.querySelectorAll();//传入一个css选择器,返回所有匹配该选择器的元素节点
  document.getElementsByName();//选择拥有name属性的html元素
  document.getElementsByTagName();//选择拥有指定标签的html元素
  document.getElementById();//选择拥有指定ID的html元素
  document.getElementsByClassName();//返回所有css名字符合的html元素

> 生成节点:
  document.createElement();//新元素节点
  document.createTextNode();//新文本节点
  document.createAttribute();//新属性节点

> 事件方法:
  document.addEventListener();//事件监听
  document.removeEventListener();//取消事件监听

Element节点

Element 节点表示 HTML 文档中的元素。元素可包含属性、其他元素或文本

# Element节点属性: 
> 特殊属性:
  Element.attributes();//当前元素的所有属性
  Element.id;//节点的id
  Element.tagName;//节点的HTML标签
  Element.className;//节点的class名字
  Element.classList;//节点的class名字集合
  Element.dataset;//节点的自定义属性
  Element.innerHTML;//节点内插入内容(不包括自身)
  Element.innerText;//节点内插入文本
  Element.outerHTML;//节点(包括自身)替换成别的HTML代码

> 尺寸属性:
  Element.clientHeight;//元素可见区域的高度
  Element.clientWidth;//元素可见区域的宽度
  Element.clientLeft;//元素节点左边框的宽度
  Element.clientTop;//元素节点上边框的高度
  Element.scrollHeight;//元素总高度
  Element.scrollWidth;//元素总宽度
  Element.scrollLeft;//元素距离左边的滚动距离
  Element.scrollTop;//元素距离上边的滚动距离
  Element.offsetHeight;//元素垂直高度
  Element.offsetWidth;//元素水平宽度
  Element.offsetLeft;//元素距离父元素左上角距离
  Element.offsetTop;//返回水平位移

> 节点相关属性:
  Element.children;//获取子元素集合
  Element.parentElement;//获取父元素
  Element.nextElementSibling;//下一个元素
  Element.previousElementSibling;//上一个元素
  Element.lastElementChild;//最后一个元素
  Element.firstElementChild;//第一个元素
  Element.offsetParent;//返回css属性不是static的父元素

# Element节点的方法
> 位置方法: 
  var box=document.getElementById('box');
  box.getBoundingClientRect().top;// 元素上边距离页面上边的距离
  box.getBoundingClientRect().right;// 元素右边距离页面上边的距离
  box.getBoundingClientRect().bottom;// 元素下边距离页面上边的距离
  box.getBoundingClientRect().left;// 元素左边距离页面上边的距离
  box.getBoundingClientRect().width;// 元素自身的宽度
  box.getBoundingClientRect().height;// 元素自身的高度

> 属性方法:
  Element.setAttribute();//设置元素的属性
  Element.getAttribute();//获取元素的属性
  Element.removeAttribute();//移除元素的属性
  Element.hasAttribute();//元素是否包含该属性

> 查找方法:
  Element.querySelector();
  Element.querySelectorAll();
  Element.getElementsByTagName();
  Element.getElementsByClassName();

> 事件方法:
  Element.addEventListener();//事件监听
  Element.removeEventListener();//取消事件监听
  //ie8 
  Element.attachEvent();//事件监听
  Element.detachEvent();//事件取消监听
  //event对象
  var event = event || window.event;
  //target目标节点
  var targe = event.target || event.srcElement;
> 其他
  Element.insertAdjacentHTML("beforeBegin","你好");//插入到标签开始标记前
  Element.insertAdjacentHTML("afterBegin","你好");//插入到标签开始标记后
  Element.insertAdjacentHTML("beforeEnd","你好");//插入到标签结束标记前
  Element.insertAdjacentHTML("afterEnd","你好"); //插入到标签结束标记后