寒假作业19

最新推荐文章于 2024-09-25 15:23:45 发布

BAILI18

最新推荐文章于 2024-09-25 15:23:45 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/BAILI18/article/details/87271519

本文深入讲解了DOM操作的基础知识，包括使用getElement系列方法访问指定节点、根据层次关系访问节点、节点属性及操作方法，如创建、插入、删除和替换节点等。同时，详细介绍了如何操作节点样式和获取元素属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第三章
1.DOM操作
访问节点
使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点
节点属性
属性名称描述
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
element属性
属性名称描述
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
2.操作节点
操作节点的属性

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";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

.cartOver{color：red;}
.cartListOut{color：bule;}

获取元素的样式

//语法：
//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);

3.获取元素属性

//语法
document.documentElement.属性;

元素属性应用

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