javascript文档对象模型

文档对象模型的概念：

DOM（Document Object Model）是文档对象模型的简称；

可以把HTML 文档中的每个成分看成一个节点，所以DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点。

节点的特点是：

1.整个文档是一个文档节点

2.每个HTML 标签是一个元素节点

3.包含在HTML 元素中的文本是文本节点

4.每个HTML 属性是一个属性节点

5.注释属于注释节点

6.HTML 文档中的节点彼此间都存在关系，类似一张家族图谱

document对象常用属性：

bgColor:设置背景颜色；

fgColor:设置文本背景颜色；

title:页面标题

document 对象查找 HTML 元素：

1.通过id查找html元素：

特点：id值唯一，可以精准定位元素对象

语法：document.getElementById("id");

innerHTML属性：  innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容。

栗子：

<p>你好世界！</p>

p文本对象.innerHTML可以获取文本内容；

p文本对象.innerHTML="你好JavaScript";可以改变内容

2.通过 name 查找 HTML 元素：

特点：name值可以重复，一个页面可以获取多个name对象，所以返回值为数组类型。

语法：document.getelementsByName(name);

参数 name 为必选项，为字符串类型;

返回的数组对象遍历方式：

for(var i;i<objs.length;i++){

var obj=objs[i];//得到每一个元素对象

}

3.通过标签名查找html元素

特点：同一页面可以有多个相同的标签元素，所以获取元素对象个数为多个，返回值用数组对象存储；

语法：document.getelementsByTagName(tagname);

参数 tagname 为必选项，为字符串类型。

返回的数组对象遍历方式：

for(var i;i<objs.length;i++){

var obj=objs[i];//得到每一个元素对象

}

4.通过类名查找 HTML 元素

特点：同一页面可以有多个相同的标签元素，所以获取元素对象个数为多个，返回值用数组对象存储；

语法：document.getelementsByClassName(classname);

参数 classname 为必选项，为字符串类型.

返回的数组对象遍历方式：

for(var i;i<objs.length;i++){

var obj=objs[i];//得到每一个元素对象

}

改变元素的文本;

obj.innerHTML="新文本";

改变元素的样式：

obj.style.fontSize="17px";

注意：js中设置的样式名称和样式表中设置的不一样；

名称中间少了‘-’，fontSize;并且从第二个单词开始

首字母大写。

改变元素的属性：

obj.attribute="新的属性值";

栗子：obj.value="";//设置值

obj.src="";//设置路径

obj.checked="";//设置选中状态

obj.innerHTML="";//设置文本内容

DOM节点的操作：

在 DOM 中每个节点都具有访问其他节点的属性：

常见属性：

parentNode : 获取当前节点的父节点

childNodes : 获取当前节点的子节点（多个）

firstChild : 获取当前节点的第一个节点

lastChild : 获取当前节点的最后一个节点

previousSibling : 获取当前节点的前一个兄弟节点

nextSibling : 获取当前节点的后一个兄弟节点

节点类型的判断：

nodeType:

childNodes 属性，它返回当前节点的所有子节点，

其中子节点包括元素节点、属性节点和文本节点。

通过节点对象的 nodeType 属性可以判断属于哪种类型的节点。

当 nodeType 是 1 时就是元素节点；

   nodeType 为 2 时是属性节点；

   nodeType 为 3 时则是文本节点。

动态添加和删除节点：

添加节点：

步骤：

1.创建节点

var ele=document.createElement("节点名称")；

  2.设置节点属性

ele.value = "";//设置值

ele.innerHTML = "";//设置文本内容

  3.将子节点追加到父节点上

ele.appendChild(子节点对象);

  4.将节点最终追加到body页面中显示

document.body.appendChild(ele);

删除节点：

语法：父节点.removeChild(子节点对象);