JS学习总结5.26

1.JS获取子节点的方式

1.通过获取dom方式直接获取子节点
其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

var a = document.getElementById("test").getElementsByTagName("div");

2.通过childNodes获取子节点
使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。

var b =document.getElementById("test").childNodes;

3.通过children来获取子节点
利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。无空格和换行。

var getFirstChild = document.getElementById("test").children[0];

4.通过firstChild获取第一个子节点
firstChild来获取第一个子元素，在有些情况下我们打印的时候会显示undefined。
firstChild和childNodes是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。子节点包含换行以及空格。

var getFirstChild = document.getElementById("test").firstChild;

5.通过firstElementChild获取第一个子节点
使用firstElementChild来获取第一个子元素的时候，这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。即直接获取子元素

var getFirstChild = document.getElementById("test").firstElementChild;

6.通过lastChild或lastElementChild获取最后一个子节点
lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。

var getLastChildA = document.getElementById("test").lastChild;会取到空格和换行
var getLastChildB = document.getElementById("test").lastElementChild;不会取到

2.JS如何获取父节点

1.通过parentNode获取父节点
获取的是当前元素的直接父元素。

var p  = document.getElementById("test").parentNode;获取类名称为test的直接父元素

2.通过parentElement获取父节点
parentElement和parentNode一样，只是parentElement是ie的标准。

var p1 = document.getElementById("test").parentElement;

3.通过offsetParent获取所有父节点
直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。

var p2 = document.getElementById("test").offsetParent;

3、js获取兄弟节点的方式

1.通过获取父亲节点再获取子节点来获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];

2.获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。

var brother2 = document.getElementById("test").previousElementSibling;取的是元素，直接取到标签
var brother3 = document.getElementById("test").previousSibling;直接取上一个兄弟节点，有可能是空格和换行

3.获取下一个兄弟节点
同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。

var brother4 = document.getElementById("test").nextElementSibling;取的是元素，直接取到标签
var brother5 = document.getElementById("test").nextSibling;直接取下一个兄弟节点，有可能是空格和换行

4.JS插入dom元素

如果这个DOM节点是空的，例如<div></div>直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

现在，HTML结构变成了这样：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

从零创建一个新的节点，然后插入到指定位置：

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

5. 比较width 与 offsetWidth 的区别

1、offsetWidth > width

element.offsetWidth = element.style.width + element.style.padding + element.style.border；（不包括margin）

2、offsetWidth 属性仅仅可读，而style.width 是可写的；
所以通常用 style.width用作进JavaScript中设置元素的宽度，而offsetWidth不可以。

3、offsetWidth 属性返回值是整数，如果实际值是小数，会根据实际值进行四舍五入操作，返回处理后的整数。width=44.499px；输出结果为49；

width=44.5px；输出结果为45；

而style.width的返回值是字符串，并且带有单位

width=44.499px；输出结果为44.499px；

4、style.width仅仅能返回以style方式定义的内部样式表的width属性值。

7.offset,client,scroll属性:

1.offsetTop属性:可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。返回值是一个整数，单位是像素。此属性是只读的。
2.offsetLeft属性:
和offsetTop的原理是一样的，只不过方位不同
3.offsetWidth属性:
可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。返回值是一个整数，单位是像素。此属性是只读的。
4.offsetHeight属性:
可以获取元素的高度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。返回值是一个整数，单位是像素。此属性是只读的。
5.clientWidth属性:
此属性可以返回一个元素的宽度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。返回值是一个整数，单位是像素。
此属性是只读的。
6.clientHeight属性:
此属性可以返回一个元素的高度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。返回值是一个整数，单位是像素。此属性是只读的。
7.scrollLeft属性:
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。
8.scrollTop属性:
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。
9.scrollHeight属性:
此属性获取对象的实际尺寸。

8. window.onload

1.window.onload出现的原因？
  页面的代码顺序是从上往下进行加载，很多时候要对页面中的某一个模块进行操作，这时候常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，不得不把js代码放在页面的底端。但是在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况.

2.window.onload是什么？
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};

9.JS的内置对象

1.Array对象：
属性：
.length 获得数组的长度；
方法：
.concat（） 连接内容或者数组，组成新的数组；
.join（n） 用n连接数组的每一项组成字符串，可以是空字符串；
.pop（） 删除数组的最后一项数据，并返回删除的数据；
.push（） 在数组最后加入新的内容返回新的数组的长度
2.String对象
属性：
.length 获取字符串的长度。
方法：
.charAt（n） 找到位置在n（索引）上的字符。
.charCodeAt（n） 找到索引位置上的字符的编码：a=97，A=65。
.indexOf（“m”） 查找字符m在字符串中第一次出现的索引；如果没有找到返回-1。
.lastIndexOf（“m”） 查找字符m在字符串中最后一次出现的索引；如果没有找到返回-。
.split（“n”） 以字符n分割字符串，并返回一个数组，空字符串时分割每个字符，如果字符串中没有该字符，同样返回数组。
.substr（n，m） 截取字符串，从索引是n的位置开始截取，截取m个字符；如果只有一个参数n，那就是从n开始截取，截取到最后。
.substring（n，m） 截取字符串，从索引是n的位置开始截取，截取到第m个字符；如果只有一个参数n，那就是从n开始截取，截取到最后。
.toLowerCase() 把字符串中的字母转化成小写。
.toUpperCase() 把字符串中的字母转化成大写。
3.Math对象
方法：
Math.pow(n,m) n的m次方。
Math.abs(n) n到原点的距离（n的绝对值）。
Math.round(n) 四舍五入取整。
Math.floor(n) 地板函数（向下取整）。
Math.ceil(n) 天花板函数 （向上取整）。
Math.random() 返回0-1的随机数（取不到1）。
Math.floor(Math.random()) 二者可以搭配使用
特殊字符：
\r 回车
\n 换行
4.Date对象 var date = new Date（）；
方法：
.toLocaleString() 以当前本地格式显示时间。
date.getFullYear() 获取date对象的年份。
date.getMonth() 获取月份（0-11）对应1-12月。
date.getDate() 获取日期。
date.getHours（） 获取小时。
date.getMinutes（） 获取分钟
date.getSeconds（） 获取多少秒
date.getMilliSeconds（） 毫秒数
date.getDay（） 获取星期几（0-6） 对应 周天至周六。
date.getTime( ) 从1970年开始到时间日期的毫秒值（时间戳）
date.setFullYear 设置年份 后边设置对照上面。

10.JS计时器

1.setTimeout() 指定的延迟时间之后来执行代码，一次性计时器
clearTimeout() 取消setTimeout()设置，关闭计时器
2.setInterval() 每隔指定的时间执行代码，循环计时器
clearInterval() 取消setInterval()设置，关闭循环计时器

11.JS枚举对象 jason数据

JSON基于两种结构：json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
1.对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，
2.在JSON中，大括号中保存对象，对象表示为键值对。数据由逗号分隔。数组由中括号保存。

枚举： 对象的枚举也叫对象的遍历（enumeration）。
1.对象的表现形式

 对象1=｛
	属性名    属性值
	属性1：值1，
	属性2：值2，
	属性3：值3，
	...
｝

属性名与属性值之间是用冒号相连接的，每个属性语句结束，都用逗号分隔。

当我们想要访问属性值的时候，有以下两种形式：
1.obj.属性名
2.obj[“属性名”]
需要注意的是，2中的属性名是字符串形式的。

for in： 访问数组和字符串的某一个元素，可以用for循环，循环访问，这是在知道长度（length）的情况下，而对象我们是无法知道它的长度的，所以可以用for in 遍历出对象的每一个属性。

  var obj = {
name : "wang",
age : 20,
sex : "male",
}
for(var num in obj){     num为键值
console.log(obj[num]);
}