DOM对象

1，概念：文档对象模型，一份html文档就是一个Dom对象

2，节点：文档中的内容，包括标签，文本，注释，标签属性等。其属性有nodeType\nodeName\nodeValue;

节点关系：父子关系childNodes和兄弟关系

种类：元素节点，文本节点，属性节点

使用nodetype获取节点类型，返回值1：元素；2属性；3文本；8注释；9文档

document节点：整个文档的节点

3 文档的写入：

document.write()参数是一个字符串。包括标签字符串

document.writeln()写完后面会有一个空格

这两个方法如果在页面加载完毕时调用，会覆盖之前加载进来的元素

4 查找元素

getElementById()参数为标签的id字符串，把匹配的id值标签返回出来

var div=document.getElementById('id名');

getElementByTagName()通过标签名获取标签，只要文档中有这个标签就会获取到

返回值是一个和数组类型相似的集合。可以利用访问数组元素的方法来访问集合中的标签

var li=document.getElementByTagName('li')

getElementsByClassName()通过class属性值获取标签参数和返回值情况与tagname不是w3c协议中的方法，存在兼容问题

getElementByName('name值')获取name属性的值获取标签，该方法一般用来获取表单元素时使用

getArributeNode()获取元素属性获取到参数指定的节点var attr=div.getAttributeNode('class');

setArributeNode()设置元素中的属性值

getAttribute:获取到的参数指定的属性的值

使用attributes属性获取到标签中的全部属性。使用[]括号包裹属性字符串就可以得到指定属性的值

console.log(ul[0].tagName);

5 标签元素的属性

tagname获取元素节点的标签名

innerHTML获取赋值。不仅可以获取到当前标签内部的文本，还可以拿到内部嵌套的子标签

不仅可以给当前标签设置文本，还可以设置子标签，且子标签能被解析

innerText只能获取到当前标签内部的文本，如果有子标签获取不到

只能设置当前标签文本，若想设置子标签，则子标签会被当做普通文本原样输出

6 脚本化CSS： 使用js设置获取标签的样式，只能获取获取到设置行内的样式，如果标签样式是设置在头部，外部样式表中，使用标签的style属性无法获取到

使用js操作标签样式的套路：

标签.style.样式属性名

7 节点的遍历

childNodes获取当前元素的所有子节点

firstChild获取当前元素第一个子节点

lastChild获取当前元素最后一个子节点

ownerDocument获取当前节点的根节点

parentNote获取当前元素的父节点

previousSibling获取当前节点的前一个同级节点

8 使用js修改css

获取当前标签左侧的距离:offsetLeft

9 标签节点的操作方法

创建一个新标签

var img=document.createElement('img');

把标签拼接进文档流

div.appendChild(img);

div.insertBefore(p,document.getElementById('p3'));

设置内容

p.innerHTML='我是插班';

替换节点

div.replaceChild(p,document.getElementById('p3'));

移除节点

document.getElementById('p1').remove();