JavaScript中操作DOM对象重点总结

DOM:

Document Object Model(文档对象模型)

 

节点和节点关系:

访问节点:

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

节点的属性:

属性名称

描述

parentNode

返回节点的父节点

childNodes

返回子节点集合,childNodes[i]

firstChild

返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

lastChild

返回节点的最后一个子节点

nextSibling

下一个节点

previousSibling

上一个节点

element属性:

属性名称

描述

firstElementChild

返回节点的第一个子节点,

最普遍的用法是访问该元素的文本节点

lastElementChild

返回节点的最后一个子节点

nextElementSibling

下一个节点

previousElementSibling

上一个节点

var Next = Parent.nextElementSibling  ||  Parent.nextSibling  

var Pre = Parent.previousElementSibling  ||  Parent.previousSibling 

var First = Parent. firstElementChild  ||  Parent.firstChild  

var Last = Parent.lastElementChild  ||  Parent.lastChild

||前后的都要写上,从而保证兼容性

节点信息:

1. nodeName:节点名称

元素节点显示标签名称

属性节点显示属性名称

文本节点显示#text

文档节点显示#document

2. nodeValue:节点值

显示对应的节点的值

3. nodeType:节点类型

节点类型

NodeType值

元素element

1

属性attr

2

文本text

3

注释comments

8

文档document

9

操作节点:

1. 操作节点的属性

getAttribute("属性名")

setAttribute("属性名","属性值")

2. 创建和插入节点

名称

描述

createElement( tagName)

创建一个标签名为tagName的新元素节点

A.appendChild( B)

把B节点追加至A节点的末尾

insertBefore( A,B )

把A节点插入到B节点之前

cloneNode(deep)

复制某个指定的节点

deep的值有true和false

true是复制本身加所有子节点

false是只复制自己本身

 

3. 删除和替换节点

名称

描述

removeChild( node)

删除指定的节点

(父节点才能调用removeChild( ))

replaceChild( newNode, oldNode)

用其他的节点替换指定的节点

(前边的替换后面的)

示例:

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

delNode.parentNode.removeChild(delNode);

 

var oldNode=document.getElementById("second");

var newNode=document.createElement("img");

newNode.setAttribute("src","images/f03.jpg");

oldNode.parentNode.replaceChild(newNode,oldNode );

4. 操作节点样式

改变样式的属性

①改变style属性

语法:HTML元素.style.样式属性="值"

示例:

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

document.getElementById("titles").style.fontSize="25px ";

style下的其他属性:

类别

属性

背景

backgroundColor、backgroundImage、backgroundRepeat

文本

fontSize、fontWeight、textAlign、textDecoration、font、color

边距

padding、paddingTop 、paddingBottom、paddingLeft、paddingRight

边框

border、borderTop、borderBottom、borderLeft、borderRight

style下的事件绑定:

名称

描述

onclick

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

onmouseover

鼠标移到某元素之上

onmouseout

鼠标从某元素移开

onmousedown

鼠标按钮被按下

②改变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";  }

5. 获取元素的样式

①语法:HTML元素.style.样式属性;

示例:

alert(document.getElementById("cartList").display);

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

示例:

var cartList=document.getElementById("cartList");

alert(document.defaultView.getComputedStyle(cartList,null).display);

②语法:HTML元素. currentStyle.样式属性;

示例:

alert(document.getElementById("cartList").currentStyle.display);  【兼容IE浏览器】

 

获取元素位置:

元素属性应用:

属性

描述

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;

总结:

  • 26
    点赞
  • 4
    评论
  • 92
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值