HTML-JavaScript操作DOM对象

叁歲伎倆 2022-05-12 07:48 245阅读 0赞

**操作****DOM**

**DOM****：****Document** **Object** **Model****（文档对象模型）**

![70][]

**节点和节点关系**

![70 1][]

### **访问节点：** ###

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

**节点属性**

<table style="width:575px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:132px;"> 属性名称 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:440px;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> parentNode </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 返回节点的父节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> childNodes </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 返回子节点集合，childNodes[i] </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> firstChild </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> lastChild </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 返回节点的最后一个子节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> nextSibling </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 下一个节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:132px;"> previousSibling </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:440px;"> 上一个节点 </td> 
 </tr> 
 </tbody> 
</table>

**element****属性**

<table style="width:612px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:182px;"> 属性名称 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:427px;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:182px;"> firstElementChild </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:427px;"> 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:182px;"> lastElementChild </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:427px;"> 返回节点的最后一个子节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:182px;"> nextElementSibling </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:427px;"> 下一个节点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:182px;"> previousElementSibling </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:427px;"> 上一个节点 </td> 
 </tr> 
 </tbody> 
</table>

**oNext** **=** **oParent.nextElementSibling** **||** **oParent.nextSibling**

**oPre** **=** **oParent.previousElementSibling** **||** **oParent.previousSibling**

**oFirst** **=** **oParent****.** **firstElementChild****  || ** **oParent.firstChild**

**oLast** **=** **oParent.lastElementChild** **||** **oParent.lastChild**

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

### **节点信息：** ###

**1. nodeName：节点名称**

元素节点显示标签名称

属性节点显示属性名称

文本节点显示\#text

文档节点显示\#document

**2. nodeValue：节点值**

显示对应的节点的值

**3. nodeType：节点类型**

<table style="width:262px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:119px;"> 节点类型 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:142px;"> NodeType值 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:119px;"> 元素element </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:142px;"> 1 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:119px;"> 属性attr </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:142px;"> 2 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:119px;"> 文本text </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:142px;"> 3 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:119px;"> 注释comments </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:142px;"> 8 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:119px;"> 文档document </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:142px;"> 9 </td> 
 </tr> 
 </tbody> 
</table>

### **操作节点：** ###

**1. 操作节点的属性**

getAttribute("属性名")

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

![70 2][]

**创建和插入节点**

![70 3][]

*deep的值有true和false*

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

*false是只复制自己本身*

![70 4][]

**删除和替换节点**

![70 5][]

**示例：**

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);

![70 6][]

**操作节点样式**

如何实现鼠标移至“我的购物车”显示商品内容？

![70 7][]

改变样式的属性

1.style属性

2.className属性

**style****属性**

**语法：HTML****元素****.style.****样式属性＝****"****值****"**

**示例：**

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

![70 8][]

![70 9][]

代码实现：

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";
        }

**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.样式属性;

示例：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浏览器】

**HTML****中元素属性**

**元素属性应用**

![70 10][]

**语法：**

document.documentElement.scrollTop;
    document.documentElement.scrollLeft;
             【标准浏览器】
    或者
    document.body.scrollTop;
    document.body.scrollLeft;
              【Chrome】

var sTop=document.documentElement.scrollTop||document.body.scrollTop;

![70 11][]

[70]: /images/20220512/4917d7b24632470a8dd38ff43dcc8b24.png
[70 1]: /images/20220512/852cdee1a1c845299852f5ab6be8cd4b.png
[70 2]: /images/20220512/ac9d8b7f7e81475788f0380f5f033490.png
[70 3]: /images/20220512/827e6ac90c414981bcc29b2374ca05bf.png
[70 4]: /images/20220512/5753257fc2ef46cf935f1da69da2dd66.png
[70 5]: /images/20220512/6904bffe924148e090ff2e657f0c3227.png
[70 6]: /images/20220512/bb8b7172984f425d97b6e57c572811fe.png
[70 7]: /images/20220512/3f186a161a26484c9172b2a8485e0a2d.png
[70 8]: /images/20220512/dcfcb161774c44dca1f154cfe745dc44.png
[70 9]: /images/20220512/40e537dd068d48499623656a5c2f03a1.png
[70 10]: /images/20220512/ed76d86ed8664ff0adacf18dd717a494.png
[70 11]: /images/20220512/49ebe5f63fc947c7bfdc0d27075824ff.png