11前端小白必看！深度揭秘DOM节点操作与 JavaScript基础要点-CSDN博客

本文链接：https://blog.csdn.net/chinayun_6401/article/details/148113449

getElementsByClassName获取类名集合

JavaScript入口函数

DOM节点介绍

nodeType属性：获取节点类型的关键

nodeName属性：洞悉 DOM节点的标识

nodeValue属性：精准操作节点核心数据

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

11前端小白必看！深度揭秘DOM节点操作与 JavaScript基础要点

getElementsByClassName获取类名集合

getElementsByClassName 方法用于获取文档中所有具有指定类名的元素集合。然而，该方法存在浏览器兼容性问题， IE6、IE7、IE8 等低版本 IE 浏览器并不支持此方法。在实际开发中，如果需要兼容这些老旧浏览器，需采用其他替代方案（如通过document.querySelectorAll或循环遍历结合classList等方式）。

JavaScript入口函数

在 JavaScript 开发中，入口函数用于确保页面内容加载完成后再执行特定的 JavaScript 代码，避免因页面元素尚未渲染而导致的操作失败。

语法：

window.onload=function(){
    // 在这里编写需要在页面完全加载后执行的JavaScript代码
}

当使用 window.onload 时，页面的结构、样式、节点等资源全部加载完毕后，函数体内的 JavaScript 代码才会被执行。

不过，对于行内式 JavaScript 代码，则无需使用入口函数。

示例代码如下：

<body>
    <button onclick="fun();">欢迎</button>
    <script>
        //直接定义函数，无需入口函数
        function fun(){
            alert(1121313);
        }
    </script>
</body>

运行结果：单击按钮，弹出1121313

DOM节点介绍

在 HTML DOM（文档对象模型）中，一切内容均可视为节点（英文单词为 “node”，发音为 /nəʊd/ ），DOM 将 HTML 文档呈现为一棵由节点构成的树状结构。

依据 W3C 的 HTML DOM 标准，HTML 文档中的各类内容分别对应不同类型的节点：

名称	描述
文档节点	整个 HTML 文档本身就是一个顶级的文档节点（document），它作为节点树的根节点，包含并统领整个文档的所有节点，是访问和操作 DOM 的入口。
元素节点	HTML文档中的每一个标签，例如<div>、<p>、<img>等，都对应一个