dom

DOM
1、简介

DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。
文档：标记型文档。常见的标记型文档：html ， xml
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。

2、解析
DOM这种技术是如何对标记型文档机型操作的呢？要操作标记型文档必须对其进行解析。常见解析技术有两种：
a、DOM技术的解析方式：将标记型文档解析一棵DOM树，并将树中的内容都封装成节点对象。例如：html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。

DOM解析方式的好处：可以对树中的节点进行任意操作，比如：增删改查。 
弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。 
b、另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是W3C的标准。 
SAX解析的方式：基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改。

3、常见的dom操作方法
(1)标签元素的操作
1）获得元素对象：
根据id获得一个元素：getElementById(id属性值)
根据标签获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)
2）创建一个新元素createElement()
3）将元素放到某个父元素的内部appendChild()
4）删除某个元素：removeChild
5）替换某个元素：replaceChild
6）标签体的获取与设置：innerHTML
7）关系：1，父节点: parentNode:对应一个节点对象2，子节点：childNodes:对应一个节点集合。
注意：appendChild和replaceChild如果操作对象是获取的dom对象，则操作的是原来的dom对象，而不是其副本（表现为原对象会被删除）。另外childNodes会将空格解析为一个文本节点
节点一般都有三个属性。节点名称nodeName，节点类型nodeType，节点值nodeValue。
(2)属性的操作
获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)
当然，属性的获取和设置还可以用点.

作者：genMudFish
来源：CSDN
原文：https://blog.csdn.net/genMudFish/article/details/52472134
版权声明：本文为博主原创文章，转载请附上博文链接！

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
文档对象模型DOM（Document Object Module）定义了用户操纵文档对象的接口，它使得用户对HTML文档有了空前的访问能力。

有效地解析并浏览DOM文档无疑能简化JavaScript的开发，因为JavaScript中绝大部分操作都是脚本和网页里不同的HTML元素之间的交互

1. 节点访问

指定节点

getElementById() 如getElementById(“one”)
getElementsByName() 一般用于访问表单元素
getElementsByTagName() document.getElementsByTagName(“p”)[3]

相关节点

“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。
（1）访问html节点和body节点
（2）访问子节点
① childNodes：子节点的列表；
② firstChild：第一个子节点；
③ lastChild：最后一个子节点。

2,访问属性

获取元素属性
getAttribute(name)
推荐直接用DOM对象.属性名获取
设置元素属性
setAttribute(name, value)
推荐用DOM对象.属性名=“属性值”
删除元素属性
removeAttribute(name)

3.访问和设置元素的内容

一般使用innerHTML属性
innerHTML可以将元素的内容（起始标记和结束标记之间）改变成其他任何内容（如文本或HTML元素）
var a=document.getElementById(“a”);
alert(a.innerHTML) //读取元素中的HTML内容，输出“把鼠标…”
a.innerHTML=“看见变化了吗？”; //设置元素中的HTML内容

4.访问和设置元素的CSS属性

1)访问元素的CSS样式：style对象 oP=document.getElementById(“test”); oP.style.color="#f00";

        如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。 
        对于CSS样式中的float属性，不能使用style.float访问，应该使用cssFloat（Firefox）

         或styleFloat（IE）访问

    2)使用className属性更改元素的类名 var myImg = document.getElementById(“picbox”); myImg.className=“pic”+str; } 
    3)使用className属性追加元素的类名 className+= “ over“ //追加类名“over”， over前必须有一空格

    4) 使用replace方法去掉元素的某一个类名 this.className=this.className.replace(/over/,""); //用 两斜杠“/”将over括起来

5,操作节点

    createElement方法：创建元素节点

createTextNode方法：创建文本节点；

var oP = document.createElement(“p”);

var oCont= document.createTextNode(“这是一条感人的新闻”);

oP.appendChild(oCont);

document.body.appendChild(oP);

① appendChild()：为当前节点新增一个子节点，并且将其作为最后一个子节点；
② insertBefore()：为当前节点新增一个子节点，将其插入到指定的子节点之前；
③ replaceChild()：将当前节点的某个子节点替换为其他节点；
④ removeChild()：删除当前节点的某个子节点

6.事件处理

1. 事件处理函数

（1）HTML 标记事件处理程序

Click Me

（2）以对象属性形式出现的事件处理程序 window.onload = dosome

2. 通用事件监听程序 oP = document.getElementById(“myP”);

    oP.attachEvent("onclick",fnClick1); //添加监听函数 
   

当在浏览器中发生一个事件时，浏览器会自动创建一个名为“event”的事件对象，在事件处理函数中可以通过访问该对象来获取所发生事件时的各种信息，包括触发事件的HTML元素、鼠标指针位置及鼠标按钮状态等

作者：penjoyer
来源：CSDN
原文：https://blog.csdn.net/Practicer2015/article/details/44992693
版权声明：本文为博主原创文章，转载请附上博文链接！