JavaScript *** 作DOM对象

一、DOM *** 作

DOM：文档对象模型，是基于文档编程的一套API接口

1.DOM *** 作分类

使用JavaScript *** 作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM

1.节点和节点关系

DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。

整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每个HTML属性是一个属性节点注释属于注释节点

使用父（parent）、子（child）和同胞（sibling）等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，关系如下：

l 在节点树中，顶端节点被称为根（root）

l 每个节点都有父节点、除了根（它没有父节点）

l 一个节点可拥有任意数量的子

l 同胞是拥有相同父节点的节点

1.访问节点

使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问指定节点，另一种是根据节点的层次关系访问节点。

节点属性：

Childnodes：返回一个数组，这个数组由給定元素节点的子节点构成。

Fristchcild：返回第一个子节点

Lastchild:它返回最后一个子节点

Parentnode:它返回一个给定节点的父节点

Nextsibling:它返回给定节点的下一个节点

Previousibling:它返回給节点的上一个节点

1.节点信息

节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，这些属性如下。

nodeName(节点名称)

nodeValue(节点值)

nodeType(节点类型)

节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

二. *** 作节点 *** 作节点的属性(获取设置)

 

  

创建和插入节点

创建节点

名称	描述
createElement(tagName)	创建一个标签名为tagName的新元素节点
A.appendChild(B)	把B节点追加至A节点的末尾
InsertBefore(A,B)	把A节点插入B节点之前
CloneNode(deep)	复制某个指定的节点

新建节点：createElement("节点名")
新建文本节点：createTextNode("文本内容")
将文本节点添加到新建节点中：appendChild(文本节点名)
获取要插入节点的对象：getElementById("id名")
将新建节点插入到目标节点对象中：insertChild(要插入节点名，目标节点位置)

删除和替换节点

名称	描述
removeChild(node)	删除指定节点
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点

*** 作节点样式

1.style

     对象.style.样式名=值;

2.className

      cLassName=”样式名”;

3.获取对象的样式值

      对象.style.样式名

常用事件：

onclick    当用户单击某个对象时调用事件

onmouseover    鼠标移到某元素之上

onmouseout    鼠标从某元素移开

onmousedown    鼠标按钮被按下

Html

 JS

 

获取元素的样式

HTML元素.style.样式属性；

HTML元素.currentStyle.样式属性；

三、获取元素位置

元素属性应用

属性	描述
offsetLest	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

1.修改层(文本)的内容

 一.如何获取表单值

1、创建一个form表单，并设置其name值为myform，使用input标签创建两个输入框，并设置name属性分别为username、sex。

2、在js中，通过form的name值和输入框的name值，使用value属性分别获得它们的值。

代码如下: