JavaScript基础（七）DOM（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/ld705454682/article/details/104632348

本文深入讲解了DOM(Document Object Model)的基础概念与应用技巧，包括如何通过JavaScript操作HTML文档中的元素，实现页面动态更新。覆盖了元素获取、事件绑定、样式修改、类样式应用等关键知识点。

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

* JavaScript分三个部分:
* ECMAScript标准:JS的基本的语法
* DOM:Document Object Model --->文档对象模型----操作页面的元素
* BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器
*
* DOM: 文档对象模型
*
* 文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看成是一个对象
* XML文件也可以看成是一个文档
*
* HTML:展示信息,展示数据的
* XML:侧重于存储数据
* html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象
*
* 页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
* 标签可以嵌套,标签中有标签,元素中有元素
*
* html页面中都有一个根标签--html--也叫根元素
*
* 页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)
*
* 文档:一个页面就是一个文档
*
* 元素(element):页面中的所有的标签都是元素,元素可以看成是对象
*
* 节点(node):页面中所有的内容都是节点:标签,属性,文本
* root:根
*
*
* 页面就是文档--document,文档中有根元素:html
* html--->head
*------>body--->其他的标签
*
* 由文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)

--------------------------------------------------------------------

点击按钮弹出对话框

//先有按钮,才能获取,获取之后才能注册事件

//根据id属性的值从文档中获取这个元素,
var btnObj = document.getElementById("btn");
//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
btnObj.onclick = function () {
//响应做的事情
alert("哦,小苏好帅哦");
};

---------------------------

//案例:点击按钮,修改p标签的显示内容

//凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式

//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").οnclick=function () {
//根据id获取p标签,设置内容
document.getElementById("p1").innerText="这是一个p";
};
--------------------------

获取多个p标签元素

<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>

//document.getElementsByTagName("标签的名字");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组

//案例:点击按钮设置多个p标签的文字内容
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").οnclick=function () {
//根据标签名字获取标签
var pObjs= document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for(var i=0;i<pObjs.length;i++){
//每个p标签,设置文字
pObjs[i].innerText="我们都是p";
}

};

</script>

</body>

--------------------------------------------------------------------------

//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象

var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按钮的value属性
this.value="我是按钮,谁咬我,我就咬谁";
this.type="text";
this.id="btn2";
};

--------------------------------------------------------------------------

排他案例

注意一个问题for循环是页面加载时执行完，事件是触发时执行

//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs[i].onclick = function () {
//把所有的按钮的value值设置为默认的值:没怀孕
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
}
//当前被点击的按钮设置为:怀孕了
this.value = "怀孕了";//这里的this不能换成btnObjs[i]，因为for循环在页面加载时已经执行完了，此时i=6
};

}
//console.log(i);//6

//for循环是在页面加载的时候,执行完毕了
// for(var k=0;k<5;k++){
//
// }
// console.log(k);//
//事件是在触发的时候,执行的

----------------------------------------------------------------

在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么DOM操作的时候,这个属性值,是布尔类型就可以了

function my$(id) {
return document.getElementById(id);
}
//规律:在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
//那么,那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了
my$("btn1").onclick = function () {
my$("rad1").checked = true;
};
</script>

------------------------------------------------------------------------------

//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

//点击按钮,修改div的宽,高,背景颜色
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";

};
</script>

--------------------------------------------------------------------------------------

通过类样式显示和隐藏属性