03-基础dom操作--highgh的博客--JavaScript学习笔记

本文链接：https://blog.csdn.net/highgh/article/details/109129585

这篇博客详细介绍了JavaScript中的DOM操作，包括DOM简介、获取元素的方法如getElementById、getElementsByClassName等，DOM事件，操作元素的内容、CSS样式和属性，以及classList的使用，并提供了小案例和弹出层案例作为示例。

摘要由CSDN通过智能技术生成

DOM简介

◆ DOM是JS操控HTML和CSS的桥梁

◆ DOM (Document Object Model,文档对象模型)是JavaScript操作HTML文档的接口,DOM赋予我们添加、移除和修改页面元素(使文档操作变得非常优雅、简便。
(元素的文字也是DOM的一个节点)

◆ DOM最大的特点就是将文档表示为节点树。

访问元素节点

◆ 所谓“访问”元素节点，就是指"得到”、"获取”页面上的元素节点

◆ 所以要对节点进行操作，第一步就是要得到它

◆ 访问元素节点主要依靠document对象

认识document对象

◆ document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中

◆ document对象也表示整个HTML文档，它是DOM节点树的根

获取元素的方式

可以通过获取id名字而在js里面直接使用

document.getElmentById()

通过id获取元素

◆ 如果页面上有相同id的元素，则只能得到第一个

document.getElmentById()

getElementsByClassName()

通过class类名获取元素数组

不兼容IE8及以下

document.getElementsByClassName()

getElementsByTagName()

通过标签名获取元素数组

◆ 数组方便遍历，从而可以批量操控元素节点

◆ 即使页面上只有一个指定标签名的节点，也将得到长度为1的数组

◆ 任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点

document.getElementsByTagName()

getElementsByName()

通过name获取

document.getElementsByName()

querySelector()

通过选择器获取元素

◆ querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素

◆ querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child() 、CSS3选择器形式都支持良好

document.querySelector()       
//不支持 IE7 及以下

querySelectorAll()

通过选择器获取元素数组

◆ querySelectorAll()方法的功能是通过选择器得到元素数组

◆ 即使页面上只有一个符合选择器的节点，也将得到长度为1 的数组,

document.querySelectorAll()
// 不支持 IE7 及以下

document.querySelectorAll("[class^='text-']") 
// 获取所有class 以 text开头的元素

我们常用的方法中，getElementById和 getElementsByName（通过name属性获取元素）是必须以document开头的。

<body>
	<p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>


    <div id="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
	<script>
         // 得到p标签的数组
        let aP = document.getElementsByTagName("p");
        console.log(aP);

        let box = document.getElementById("box");
        let box_p = box.getElementsByTagName("p");
        console.log(box_p);
    </script>
</body>

特殊元素的获取

console.log (document.head);//head
console.log (document.body);//body
console.log (document.title);title标签的文字内容，可以赋值修改title
console.log (document.documentElement);//html

 document.title = "我修改后的title";

延迟运行

在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点

可以使用window.onload = function(){} 事件，使页面加载完毕后，再执行指定的代码

<script>
    // 给window对象添加onload事件监听. 
    // onload表示页面都加载完毕了