javascript &dom学习（一）

最新推荐文章于 2024-08-12 09:26:58 发布

youknowml

最新推荐文章于 2024-08-12 09:26:58 发布

阅读量105

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yrhlyyouknow/article/details/107326210

版权

本文详细介绍了DOM（文档对象模型）的基本概念，包括节点类型、属性及其应用。通过JavaScript操作DOM进行网页元素的获取和修改，同时讲解了事件处理机制，如事件绑定及响应函数的使用。

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

DOM:

document object model
文档对象模型
DOM 可以通过js 操纵网页
文档：表示的就是整个html 页面
对象：对象表示的就是将网页的每一个部分都转换为了一个对象
模型：使用模型来表示对象之间的关系，这样方便我们获取对象

比如h1 body html 也是对象就是html 中的每个节点
以面向对象的形式操作更简单

节点：
节点Node 是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为一个节点
类型也是不一样的

文档节点：整个Html 文档
元素节点：html 文档中的html 标签
属性节点：元素的属性
文本节点：html 标签中的文本内容

节点的属性

nodeName:
文档节点：#document
元素节点：标签名
属性节点：属性名
文本节点：#text

nodeType:
文档节点：9
元素节点：1
属性节点：2
文本节点：3

nodeValue：
文档节点：null
元素节点：null
属性节点：属性值
文本节点：文本内容

<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*浏览器已经为我们提供了文档节点的这个对象是window 属性 可以在页面中直接使用，文档节点代表的是整个网页*/
console.log(document);

/*获取到button 对象*/
var btn=document.getElementById("btn");
console.log(btn);
/*修改按钮的文字*/
btn.innerHTML="i’m  Button";

</script>

口诀：找对象
搞对象

事件：

事件就是文档或者浏览器窗口发生的一些特定的交互瞬间
比如：点击按钮，鼠标移动，关闭窗口
处理事件：
在事件对应的属性中设置一些js 代码，这样当事件被触发的时候，这些代码将被执行

<button id="btn" ondblclick="alert('讨厌，你点我干嘛')；"/>
<button id="btn"  onmousemove="alert(''讨厌，你点我干嘛')；"/>

这种写法结构额行为耦合，不方便维护
我们可以为按钮的对应事件绑定处理函数的形式来响应事件
//获取按钮的对象

<script>
var btn=document.getElementById("btn");
//像这种为单击事件绑定的函数，我们可以成为单击响应函数
btn.onclick=function(){//如果是双击事件的话就ondblclick
alert("你还点");
}
</script>

文档的加载

//注意的是将js代码编写到页面下就是为了，可以载页面加在完毕以后再执行js 代码
<button id=“btn”>加我一下</button>
<script type="text/javascript">
//获取id为btn的按纽
var btn=document.getElementById("btn")；
//为我们的按钮绑定一个单击响应函数
btn.onclick=function(){
alert("hello");};

</script>

浏览器在加载一个页面的时候是按照自上到下的顺序加载的
读取到一行就运行一行
如果将我们的script 标签写到页面的上边、
在代码执行的时候，页面还没有加载，则DOM 对象也还没加载，会导致无法获取到DOM 对象

onload 事件会在整个页面加载完成之后才能触发为window绑定一个onload 事件
该事件对应的的响应函数将在页面加在完成之后执行这样可以确保我们的代码执行时所有的DOM 对象已经加在完毕了

<head>
<javascript>
window.onload=function(){
alert("hello");
};
</script>
</head>

这个时候运行出来就是按钮出来同时弹出个警告

注意：如果要把代码放在上面（script之间的话），是想先出来按钮再点击的话一定要注意下面的这种写法

<head>
<javascript>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("hello");}
}
</javascript>
</head>

DOM 查询

获取元素节点
通过document对象调用

getElementById();
这是通过id 属性来获取一个元素节点对象
getElementsByTagName();
这是通过标签名来获取一组元素节点对象
getElementsByName()
这是通过name属性来获取一组元素节点对象

练习：
<head>
<script>
window.olnload=function(){
//为id为btn 01 的按钮绑定一个单击响应函数
//查找#bj 节点
var btn01=document.getElementById("btn01")；
btn01.onclick=function(){
var bj=document.getElementByd("bj");
//打印bj;
//innerHTML通过这个属性可以获取到元素内部的html 代码
alert(bj.innerHTML);


}

//查找所有的li节点
为id为btn 02的事件绑定函数
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
//getElementsByTagName()通过标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中。
//注意：即使查询到的元素只有一个，也会封装到数组中返回
var lis=document.getElementsByTagName("li");
//打印 lis
alert(lis.length);
for(var i=0;i<lis.length;i++)
{
    alert(lis[i].innerHTML);
    
}

};


//查找name=gender 的所有节点
var btn3=document.getElementById("btn3");
btn3.onclick=function(){
var inputs=document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0;i<inputs.length;i++)
//innerHTML 用于获取元素**内部**的html 代码的
//对于自结束标签来说innerHTML 没有意义
//如果需要读取一个元素节点的属性
//直接使用元素名.属性名
//例子：元素.id  元素.name  元素.value
//但是需要注意的是class 不能使用这种方式
//读取class 属性的时候需要使用元素.className
//读取
alert(inputs[i].name);

}
};
//查找#city 下所有的li 节点
//#city 的所有的子节点
//返回#phone 的第一个子节点
//返回#bj 的父节点
//返回#android 的前一个兄弟节点
//读取#username 的value 属性值
//设置#username  的vaue 属性值
//返回#bj 的文本值
}

</script>