第三章 javascipt_javascipt html文件的每个空格都是一个文本节点-优快云博客

本文介绍了DOM操作的基础知识，包括节点类型、访问和修改节点的方法，以及如何使用JavaScript改变元素样式。通过具体示例展示了增删改查节点、设置属性值及修改样式的多种方式。

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

1、DOM操作分为：DOM Core,HTML-DOM，CSS-DOM。

2、节点和节点关系

整个文档是一个文档节点

每个html标签是一个元素节点

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

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

访问节点getElement系列方法来访问指定节点

.getElementById（）：返回子节点li标签第一个

3、在HTML-DOM中查找节点的标准方法是getElement系列方法，也可以使用parentNode，

4、在Core DOM中访问和设置节点属性值的标准方法是getAttribute（）和setAttribute（）。
img.setAttribute("src","images/e.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextSibling.innerHTML(我和狗狗一起活下来);

5、增，删，改
//删除的方法
    function del() {
        var info=document.getElementById("123");
        info.parentNode.removeChild(info);
    }

//替换
    function update() {
        var info=document.getElementById("12345");
       var infos=document.createElement("img");
       infos.setAttribute("src","images/ee.png");
       info.parentNode.replaceChild(infos ,info);
    }

    //增加
    function insert() {
        var info=document.getElementsByTagName("div")[0];
        var infos=document.createElement("img");
        infos.setAttribute("src","images/ee.png");
        info.appendChild(infos);

}

6、使用JavaScript改变样式的两种方法是使用style属性和className属性。
document.getElementById("cartList").style.display="none";
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";
}

7、使用style对象获取内联样式属性，DOM提供了getComputedStyle（）方法以获取样式中的属性。