dom介绍

通过 DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

dom全称document object model文档对象模型

对象表示将网页中的每一个部分都转换成一个对象

模型表示对象之间的关系，方便获取对象

节点node是构成网页的最基本的组成部分：

节点分为四类 1.文档节点（整个网页document） 2.元素节点（标签） 3.属性节点（id/class等） 4.文本节点（内容）

<p id='a1'>this is文本节点</p>

 onload事件会在整个页面加载完成之后才触发

window.onload = function(){
    alert('hello')
}

js通过dom对html网页进行操作

1. document:Document 对象是 Window 对象的一部分，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
2. Element:Element 对象表示 HTML 元素。creatElement()：创建元素节点
3. textNode:文本。creatTextNode():创建文本节点
4. comment:注释。creatComment()：创建注释字节

属性

1.nodeType:表示节点类型

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

如果节点是文本节点，则 nodeType 属性将返回 3。

2.nodeName:返回节点名称

3.nodeValue:是否含有value属性

4.parentNode:指向父节点

5.childNodes：返回所有子节点

6.children：返回所有element类型的子节点

7.previousSibling:该节点的同辈的上一个节点

8.nextSibling：该节点的同辈的下一个节点

9.firstChild：列表中第一个子节点

10.lastChild：列表中最后一个子节点

11.ownerDocument：返回document

方法

1.hasChildNodes();只要是非空节点就返回true

2.appendChild();在列表末尾添加一个节点

3.insertBefore(new,reference) 将new节点插入到reference之前,放在同辈参照物之前

4.replaceChild( , );替换某个dom

5.removeChild( , );移除某个子节点

6.cloneNode();拷贝,

没有参数，默认为浅拷贝，不拷贝内容。如果要拷贝内容，可以指定值为true

注意事件，因为在主流浏览器中，事件深拷贝时，不会被拷贝

但是IE会被拷贝，所以在拷贝有事件的标签时，建议先删除事件

7.normalize();删除空白节点,合并为一个文本节点

查找元素

1.getElementById();查找元素，参数为要取得元素的ID

2.getElementsByTagName();参数为要取得元素的标签名

3.getElementsByClassName();参数为class属性

4.getElementsByName();获取到所有name相同的元素，适用于表单

Document类型

1.documentElement   指向html

2.body  指向body元素

3.doctype  版本信息

4.title  获取文档的标题

5.URL  网址

6.domain  域名

7.referrer  从哪个页面跳转过来

8.images  获取当前页面的所有img标签

9.forms  获取当前页面的所有表单元素 

10.links  获取当前页面的所有a标签

Element类型

1.id

2.className :与元素class特性对应

3.title:有关元素的附加说明信息

4.src:动态修改一个图片的地址

获取html元素的方法

a1.getAttribute('id');

设置html属性的方法

a1.setAttribute('class','blue');

删除html属性的方法

a1.removeAttribute('class');

a1.Attributes;//包含所有属性的类数组对象

console.log(attrs.getNamedItem('id').nodeValue);

getNamedItem返回属性值

removeNamedItem(name)  从列表中删除nodeName属性等于name的值

添加属性：

var a = document.createAttribute('class');
a.nodeValue = 'red';
a1.attributes.setNamedItem(a);

var p = document.createElement('p');
var t = document.createTextNode('今天天气很好');
p.appendChild(t);
a1.appendChild(p);

a1.style.backgroundcolor = 'red';

a1.onclick = function(){
    alert('hello');
}//点击事件

对象中仅包含Element对象

firstElementChild  第一个孩子元素字节

lastElementChild  最后一个孩子元素字节

nextElementSibling 下一个兄弟元素字节

previousElementSibling  上一个兄弟元素字节

childElementCount 子元素的数量

children.length 子元素的数量

childNodes.length 子元素的数量（包括空格）

获得该元素（标签）里的内容

innerHTML:返回元素内容，包括html标签

console.log(a2.innerHTML)//a2标签里的内容

innerText:元素内部的文本，去除回车和换行

textContent:元素内部的文本，不去除空格和回车

a2.innerHTML = '<p>今天天气好</p>'//返回  今天天气好
a2.innerText = '<p>今天天气好</p>'//返回  <p>今天天气好</p>
a2.textContent = '<p>今天天气好</p>'//返回 <p>今天天气好</p>

text类型（文本类型）

createTextNode:创建文本

length:长度

appendData:追加文本

deleteData(0,6):删除文本,开始位置，和删除个数

replaceData(0,8,'xiaoming');替换文本，开始位置，和个数，替换内容

insertData(0,'xiaohong');插入文本，开始位置，插入内容

splitText(4);从beginIndex位置将当前文本节点分成两个文本节点

var text = document.createTextNode('xiaoming');
var res = text.splitText(4);
console.log(res);//xiao
console.log(text);//ming

substringData(0,2);从beginIndex开始提取count个子字符串,截取

点击事件：

<button onclick='test()'>按钮</button>

var ul = document.getElementById('myul');
var lis = document.getElementsByTagName('li');
var lis_length = lis.length1;
for(var i = 0;i<lis_length;i++){
    lis[i].onclick = function(){
        this.style.backgroundcolor = 'yellow';
}
}
ul.onclick = function(e){//回调函数
            e.target.style.backgroundColor = 'yellow';
            e.preventDefault();//取消事件的默认行为
            e.stopPropagation();//阻止事件传播
        }
a1.addEventListener('click',function(){
            console.log(111);

        },false)//第三个参数true是捕获阶段触发，false是冒泡阶段触发，默认为false