3.DOM对象、节点和元素

本章目标

了解DOM的分类和节点间的关系

熟练使用JavaScript操作DOM节点

访问DOM节点

能够熟练的进行节点的创建、添加、删除、替换等

能够熟练的设置元素的样式

能够灵活运用JavaScript获取元素位置的属性来完成网页效果

1. 操作DOM

DOM：Document Object Model（文档对象模型）

1. 节点和节点关系

1. 访问节点
   1. 使用getElement系列方法访问指定节点
      • getElementById()、getElementsByName()、getElementsByTagName()
      • 根据层次关系访问节点

 

1. 根据层次关系访问节点2-1
   1. 节点属性

属性名称	描述
parentNode	返回子节点集合，childNodes[i]
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

 

1. 1. element属性

示例：

oNext = oParent.nextElementSibling || oParent.nextSibling   

oPre = oParent. previousElementSibling || oParent.previousSibling  

oFirst = oParent. firstElementChild  ||  oParent.firstChild   

oLast = oParent.lastElementChild || oParent.lastChild

1. 1. 节点信息
      • nodeName：节点名称
      • nodeValue：节点值
      • nodeType：节点类型

**大纲**

1. 1. 操作节点的属性；
   2. 创建和插入节点；
   3. 删除和替换节点
   4. 操作节点样式
   5. 获取元素的样式

 

1.操作节点的属性

getAttribute("属性名")

getAttribute("属性名"，"属性值")

 

2.创建和插入节点

creatElement(tagName)-创建一个标签名为tagName的新元素节点

A.appendChild(B)--把B节点追加至A节点的末尾

insertBefore(A,B)--把A节点插入到B节点之前

cloneNode(deep)--复制某个指定的节点

3.删除和替换节点

名称 描述

removeChild(node) 删除指定的节点

replaceChild(new,old)属性attr          用其他的节点替换指定的节点

 

删除：

var delNode=document.getElementById("first");

delNode.parentNode.removeChild(delNode);

 

替换：

var oldNode=document.getElementById(“second”);

var newNode=document.creatElement(“img”);

newNode.serAttribute(“src” , “images/f03.jpg”);

oldNode.parentNode.replaceChild(newNode , oldNode);

 

1. style属性

HTML元素 . style . 样式属性=”值”

document.getElementById(“titles”) . style. color=”#ff0000”;

document.getElementById(“titles”) .style .fontsize=”25px”;

类别 属性

背景 backgroundColor、bacgroundImage、backgrounRepeat

文本 fontSize、fontWeight、textAlign、textDecoration、font、color

边距 padding、paddingTop、paddingBottom、paddingLeft、paddingRight

边框 border、borderTop、borderBottom、borderLeft、borderRight

 

名称 描述

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

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮按下

 

1. style属性

 

1. 1. 鼠标放在上面：

function over(){

document.getElementById(“cart”) .style. backgroundColor=”#ffffff”;

document.getElementById(“cart”) .style. zIndex=”100”;

document.getElementById(“cart”) .style. borderBottom=”none”;

document.getElementById(“cartList”) .style. display=”block”;

document.getElementById(“cartList”) .style. position=”relative”;

document.getElementById(“cartList”) .style. top=”-1px”;

}

1. 1. 鼠标移开：

function out(){

document.getElementById(“cart”) .style.backgroundColor=”#f9f9f9”;

document.getElementById(“cart”) .style.borderBottom=”solid 1px #dcdcdc”;

document.getElementById(“cartList”) .style.display=”none”;

}

1. className属性

HTML元素 . className=”样式名称”

function over(){

document.getElementById(“cart”) .className =”cartOver”;

document.getElementById(“cartList”) .className =”cartListOver”;

}

function out(){

document.getElementById(“cart”) .className =”cartOut”;

document.getElementById(“cartList”) .className =”cartListOut”;

}

1. 获取元素的样式

语法：

HTML元素 .style. 样式属性;

示例：

alert (document.getElementById(“cartList”) .style. Display);

语法：

document.defaultView.getComputedStyle(元素，null) .属性;

示例：

var cartList=document.getElementById(“cartList”);

alert(document.defaultView.geyComputedStyle(cartList , null).display)

 

语法：-------兼容IE浏览器：

HTML元素 .currentStyle .样式属性;

示例：

alert (document.getElementById(“cartList”).currentStyle.display);

1. HTML中元素属性以及应用

属性：

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

 

应用:

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

---------标准浏览器

或者

document.body.scrollTop;

document.body.scrollLeft;

----------Chrome浏览器

 

var sTop=document.documentElement.scrollTop||document.body.scrollTop;