慕课笔记:JS基础之——DOM对象，控制HTML元素_慕课检查网页元素-优快云博客

本文链接：https://blog.youkuaiyun.com/actttt/article/details/75274310

前提：

HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.google.com"。

获取一个节点对象的方法：

document.getElementById('id') ：该方法返回一个节点对象，因为Id是唯一的；

document.getElementsByName('name') ：该方法返回一个节点数组，因为节点的name属性是可以重复的，如果该name只有一个，则返回一个只含有一个元素的数组。

document.getElementsByTagName('Tagname') ：通过标签名，返回一个节点数组，类似通过name；

获取属性和设置属性的值的方法：

elementNode.getAttribute(name) ：name是指元素节点的属性的名字

elementNode.setAttribute(name,value) ：设置属性的值

节点属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

节点访问：

elementNode.childNodes 返回一个子节点的数组，除了IE之外的浏览器会把节点之间的空白符判定为一个文本节点，可以在之后加判断删除。

elementNode.firstChild 返回第一个子节点等于elementNode.childNodes[0]

elementNode.lastChild 返回最后一个子节点，等于elementNode.childNodes[elementNode.childNodes.length-1]

elementNode.parentNode 返回父节点。//elementNode.parentNode.parentNode 返回父节点的父节点

elementNode.nextSibling 返回该节点的下一个兄弟节点，无则返回null

elementNode.previousSibling 返回上一个兄弟节点，无则返回null

插入、删除、替换和新建节点

elementNode.appendChild(newnode) 在该节点的最后一个子节点后插入一个新的子节点//使用 document.createElement（“标签”）创建新节点

elementNode.insertBefore(newnode,node) 在已有的子节点前插入一个新的子节点 // 是插入子节点，所以由父节点调用该方法。

elementNode.removeChild(node) 删除一个子节点，成功则返回被删除的节点，失败则返回NULL//删除的节点赋值给变量，则虽然该节点不存在DOM树种，依旧存在于内存，可以从变量名使用它。要完全删除，则将该变量赋值为null

elementNode.replaceChild (newnode,oldnew ) 替换一个子节点

document.createElement(tagName) 新建一个元素节点，与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中//a标签实现超链接

document.createTextNode(data) 新建一个文本节点 //使用getElementsByTagName('script')[0],然后添加node不行，取‘body’可以，不知道原因

window.innerHeight 获取浏览器窗口的内部高度，适用于IE9+、Chrome、Firefox、Opera 以及 Safari

window.innerWidth 获取浏览器窗口的内部宽度，适用于IE9+、Chrome、Firefox、Opera 以及 Safari

获取网页内部各种距离

scrollHeight和scrollWidth，获取网页内容高度和宽度。针对IE、Opera:0scrollHeight 是网页内容实际高度，可以小于 clientHeight。针对NS、FF:scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。使用方法：var w=document.documentElement.scrollWidth || document.body.scrollWidth;

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。用法同上

{ 这几句引自w3c---------

element.clientWidth:在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.clientHeight:在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.scrollWidth:返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.scrollHeight:返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.offsetWidth:返回元素的宽度，包括边框和填充，但不是边距
element.offsetHeight:返回任何一个元素的高度包括边框和填充，但不是边距

}

element.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离

element.scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离

element.offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

element.offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

element.offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

/ http://blog.youkuaiyun.com/xiebaochun/article/details/38382169 此博客为 offsetLeft,Left,clientLeft的一些说明