JS4,Dom

当网页被加载时，浏览器会创建页面的文档对象模型

dom元素指的是页面的标签,通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom元素

node节点指的是页面的任意元素(页面的每个东西都是节点), 标签 换行符 注释 空格 属性 标签内容等都可以被当做node节点既然是节点,也是可以被js选中的

当文档/页面加载完毕后才会执行onload函数

• window.onload = function(){

id选择：var p1 = document.getElementById('p1');

通过标签名选：var h2=document.getElementsByTagName('h2');

通过class：getElementsByClassName()函数的返回值是一个数组

通过标签name属性：var li = document.getElementsByName('hobbys')

添加事件的两种方式

• 方式1 : DOM对象的onclick属性

• innerBox.onclick = function(){}

• 方式2 : 在标签中定义事件,事件触发函数

• 恢复

input 获取内容使用value,option也是使用value属性来获取值

• var num1 = document.getElementById('num1').value;

• 把字符串内容转换number：num1 = parseInt(num1);

• innerHTML属性是来给标签设定展示给用户的内容

• document.getElementById('result').innerHTML= (num1 + num2);

p1.innerHTML = '<h1>MSR学院</h1>';

• 会把插入的html解析了

p2.innerText = '<h1>MSR学院</h1>';

• 插入纯文本

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

• var id = setInterval('jump()',1000);

清除计时器：clearInterval(id);

页面跳转：window.location.href = 'http://www.baidu.com';

document.write(new Date()) ;：该方法会重置页面:原有内容会消失

nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；

• var p4 = p3.nextSibling;

nextElementSibling属性只返回元素节点之后的兄弟元素节点 (不包括文本节点、注释节点）；

• var p4 = p3.nextElementSibling;

firstChild 找到第一个孩子节点,包括回车空格等文本在内.

• var p1 = box.firstChild;

• var p1 = box.firstElementChild;

childNodes 属性返回所有的节点，包括文本节点、注释节点；

• var ps = box.childNodes;

children 属性只返回元素节点；

• var ps = box.children;

每个标签有一个 nodeType的属性 用于标明 当前标签的类型.

• nodeType == 1 表示的是元素节点 记住 元素就是标签

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

• cNodes.splice(index,1);

内存中创建标签:var pEle = document.createElement('p');

//插入节点 父节点.appendChild();:boxEle.appendChild(pEle);

父节点.insertBefore(要插入的节点，参考节点)；

• boxEle.insertBefore(img, pEle);

父节点.removeChild（子节点）。

• document.body.removeChild(p1);

• 链式编程:p1.parentNode.removeChild(p1);

var p1_clone = p1.cloneNode(true);

• true为深度克隆 ; 不然只会克隆标签本身

• var p1_clone = p1.cloneNode();

• 在script标签前面插入

• document.body.insertBefore(p1_clone,script);

获取：getAttribute(名称)

• pEle.getAttribute('title')

设置：setAttribute(名称, 值)

• pEle.setAttribute('title','你愁啥!');

删除：removeAttribute(名称)

• pEle.removeAttribute('title');

获取danger的下标位置

• var index = clazzArr.indexOf('danger');

把数组变为字符串

• clazzStr = clazzArr.join(' ');

根据索引值移除danger

• clazzArr.splice(index,1);