JavaScript操作DOM对象

JavaScript操作DOM对象

DOM概述

• Document Object Model，即文档对象模型
• DOM
  • DOM Core
  • CSS-DOM
  • HTML-DOM
• 节点与节点的关系

访问节点

• 使用getElement系列方法访问指定节点
  • getElementById() 通过id访问节点
  • getElementsByName() 通过类名访问节点
  • getElementsByTagName() 通过标签访问节点
• 根据层次关系访问节点
• 节点属性
  • parentNode 返回节点的父节点
  • childNodes 返回子节点集合，childNodes[i]
  • firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
  • lastChild 返回节点的最后一个子节点
  • nextSibling 下一个节点
  • previousSibling 上一个节点

element属性

• firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
• lastElementChild 返回节点的最后一个子节点
• nextElementSibling 下一个节点
• previousElementSibling 上一个节点

节点信息

• nodeName：节点名称
• nodeValue：节点值
• nodeType：节点类型
  • 元素element 1
  • 属性attr 2
  • 文本text 3
  • 注释comments 8
  • 文档document 9

操作节点属性

• getAttribute(“属性名”)
• setAttribute(“属性名”,“属性值”)

创建和插入节点

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

删除和替换节点

• removeChild( node) 删除指定的节点
• replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

style属性

//语法：
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";

className属性

//语法：
HTML元素.className=“样式名称”
function over(){     
	document.getElementById("cart").className="cartOver";
	document.getElementById("cartList").className="cartListOver";
} 

获取元素样式

• 语法：HTML元素.style.样式属性;

• 不支持IE浏览器

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

• 兼容IE浏览器

  HTML元素. currentStyle.样式属性;

HTML中元素属性

• offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性

• offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性

• offsetHeight 返回元素的高度

• offsetWidth 返回元素的宽度

• offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用

• scrollTop 返回匹配元素的滚动条的垂直位置

• scrollLeft 返回匹配元素的滚动条的水平位置

• clientWidth 返回元素的可见宽度

• clientHeight 返回元素的可见高度

• 标准浏览器应用属性案例

  document.documentElement.scrollTop; 
  document.documentElement.scrollLeft;
  12
  

• Chrome应用属性案例

  document.body.scrollTop; 
  document.body.scrollLeft;