JavaScript操作DOM对象_点击产品后,在页面显示出图片的宽和高,根据层次关系访问图片节点-CSDN博客

本文链接：https://blog.csdn.net/qq_41275501/article/details/80011414

DOM操作

DOM是Document Object Model 的缩写，即文档对象模型，是基于文档编程的一套API接口。

DOM操作分类

使用JavaScript操作DOM时通常分为三类：DOM Core(核心)、HTML-DOM和CSS-DOM。

节点和节点关系

DOM 是以树状结构组织的HTML 文档，根据DOM 概念，我们可以知道，HTML文档中每个标签或元素都是一个节点，在DOM 中是这样规定的。
整个文档是一个文档节点。
每个HTML 标签是一个元素节点。

包含在HTML 元素中的文本是文本节点。

每个HTML属性是一个属性节点。

注释属于注释节点。

一个HTML 文档是由各个不同的节点组成的，为了让大家理解文档结构，请看示例的HTML文档。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点</title>
</head>
<body>
<img src="" alt="水果">
<h1>喜欢水果</h1>
<p>DOM应用</p>
</body>
</html>

示例的文档由<html>、<head>、<title>、<body>、<img>、<h1>、<p>

及文本节点组或这些节点都存在着层次关系，它们之间的关系如图3.1所示。

使用父(parent)、子(child) 和同胞(sibling) 等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，它们的关系如下。
  在节点树中，顶部节点被称为根(root)，如<html>节点。
  每个节点都有父节点，除了根(它没有父节点),如<head>和<body>的父节点都是<html>.文本节点“DOM 应用”的父节点是<p>节点。
  一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<img>、<h1>和<p>。同胞节点是拥有相同父节点的节点，如<img>、<h1>和<p>就是兄弟节点，它们的父节点均为<body>节点。
由于HTML 文档中的标签、元素等都是一个节点，并且各个节点之间都存在着关系，因此JavaScript 可以通过访问或改变节点的方式来改变页面的内容，使用JavaScript操作节点主要是访间节点，在文档中创建和增加节点、删除节点、替换节点，以及操作节点属性和样式等。

访问节点
使用DOM Core访问HTML 文档的节点主要有两种方式，一种是使用getElement系列方法访问指定节点另外一种是根据节点的层次关系访问节点。

操作节点的属性

插入：

function insert() {
    var img = document.getElementById("image");
    var img2=document.createElement("img");
    img2.setAttribute("src","tp/u=285570579,921421191&fm=27&gp=0.jpg");
    img2.setAttribute("width","200");
    img2.setAttribute("height","200");
    img2.setAttribute("alt","图片");
    img.parentNode.appendChild(img2);
}

删除：

function delete1(){
    var del = document.getElementById("image");
    del.parentNode.removeChild(del);
}

替换：

function rep() {
    var old = document.getElementById("image");
    var newold = document.createElement("img");
    newold.setAttribute("src","tp/u=285570579,921421191&fm=27&gp=0.jpg");
    newold.setAttribute("width","200");
    newold.setAttribute("height","200");
    old.parentNode.replaceChild(newold,old);
}

操作节点样式

1.style属性

语法：

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

例：

/*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";
}
function out(){
    document.getElementById("cart").style.backgroundColor="#f9f9f9";
    document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
    document.getElementById("cartList").style.display="none";
}*/

2.className属性

语法：

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

例：

/*   function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
        //alert(document.getElementById("cartList").display);
        //alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
        /!*使用getComputedStyle获取属性值
        var cartList=document.getElementById("cartList");
        alert(document.defaultView.getComputedStyle(cartList,null).display);*!/
     }
     function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }
*/

获取元素的样式

语法：

HTML元素.style.样式属性；

示例：

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

语法：

HTML元素.currentStyle.样式属性；

示例：

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

//使用currentStyle获取属性值

语法：

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

示例：使用getComputedStyle获取属性值

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);