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);