JavaScript操作DOM

最新推荐文章于 2024-08-11 00:22:53 发布

原创最新推荐文章于 2024-08-11 00:22:53 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

这篇博客详细介绍了DOM的概念，包括它是如何作为标准编程接口处理XML和HTML文档的。内容涵盖了节点的关系、访问和操作方法，如getElementById、getElementsByTagName等。此外，还讲解了如何改变节点的属性、创建和插入新节点、删除和替换节点，以及使用style和className属性来调整元素的样式。同时，讨论了获取元素样式的方法，包括内联样式和计算样式。最后，涉及了HTML元素属性的使用和应用。

一、概念

1.DOM：Document Object Model（文档对象模型）
2.DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前的页面。
3.DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

二、节点和节点的关系

三、访问节点

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

四、根据层次关系访问节点

五、节点信息

六、操作节点的属性

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

七、创建和插入节点

八、删除和替换节点

九、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";

     }

十一、获取元素样式

HTML元素.style.样式属性;(这个方法只能获取写在html标签中的style属性的值)

alert(document.getElementById("adver").style.top);

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

var adverObj=document.getElementById("adver");

alert(document.defaultView.getComputedStyle(adverObj,null). top);

HTML元素. currentStyle.样式属性;

alert(document.getElementById(“adver").currentStyle.top);

十二、HTML中元素属性

十三、元素属性应用