九、JavaScript DOM对象

最新推荐文章于 2022-10-31 14:25:33 发布
最新推荐文章于 2022-10-31 14:25:33 发布
阅读量246 收藏
点赞数
分类专栏： JavaScript高级 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49576031/article/details/120677055
版权

DOM(Document Object Model) :  文档对象模型

 

DOM的结构呈树状，所以也把DOM叫做DOM树，DOM树是由很多DOM节点组成的

DOM结构图：

 文档树中所有的标签被称为“节点”

节点分类：

  • 元素节点

  • 属性节点

  • 注释节点

  • 文本节点

1.获取DOM元素

     获取DOM的所有方法（DOM对象）

document 获取document文档(这是一个对象)无
document.head获取head标签无
document.body  获取body标签无
document.documentElement获取html标签无
document.getElementById()  通过元素属性id值获取元素IE7以下不区分大小写,会获取name属性)
document.getElementsByName()  通过name属性获取返回的东西不固定
doucument.getElementsByClassName()通过class类名获取ie 9以后支持
element.querySelector() 选到指定选择器下的第一个元素ie 8 以后才支持 移动端没有问题。
element.querySelectorAll() 选到指定选择器下的所有元素ie 8 以后才支持 移动端没有问题。

 注意：动态获取与静态获取

get系列是动态获取 每次使用时会重新获取

query系列是静态获取

  • 通过id获取元素对象

   getElementById()

<body>
  <p id="idp">通过id获取dom元素</p>
  <script>
    let pdom = document.getElementById('idp');
    console.log(typeof pdom) //object
  </script>
</body>

需要注意的是，getElementById里面就写id就行了，不要多写#

如果说页面上没有匹配的id的HTML元素，将返回null，

id大小写要严格区分，但是在IE7及以下中，大小写是不区分的。

  • 通过元素名获取元素对象集合

getElementsByName() :获取的是一个元素对象的集合（类数组）

代码例👇

<body>
<div>你好呀</div>
<div>hello world</div>
<script>
    let divsdom = document.getElementsByTagName('div')
    console.log(typeof divsdom) //object
    console.log(divsdom)
</script>
<body/>

图例👇 

 

  •  通过类名获取元素对象集合

getElementsByClassName()

代码例👇

<body>
<div class='box'>你好呀</div>
<div class='box'>hello world</div>
<script>
    let divsdom = document.getElementsByClassName('box')
    console.log(typeof divsdom) //object
    console.log(divsdom)
</script>
<body/>

2.改变页面中的所有 HTML 元素[元素的文本内容]

2.1innerHTML()

获取：

获取内容的时候，如果内容中有标签，会把标签获取到。 

输出：

如果内容中有标签，我们会按照html形式输出。

2.2innerText（）

获取：

获取内容的时候，如果内容中有标签，会吧标签过滤。

输出：

如果内容中有标签，我们会按照文本形式输出。

2.3 textContent 和innerText 获取7以下

3.JavaScript 能够改变页面中的所有 CSS 样式

dom对象.style.具体的css属性名称=属性名称对应的属性值；

例如：

<head>

<meta charset="utf-8">

<title></title>

<script>

function  testCss(){

//dom对象.style.具体的css属性名称=属性名称对应的属性值；

var imgdoc=document.getElementsByTagName("img")[0];

var button=document.getElementById("but1");

var hdoc=document.getElementsByTagName("h1")[0];

var buttext=button.value;

if(buttext=="隐藏"){

button.value="显示";

imgdoc.style.display="none";

}

if(buttext=="显示"){

button.value="隐藏";

imgdoc.style.display="block";

}

}

</script>

</head>

<body>

<h1>hello<a href="#">test</a></h1>

<img src="imgs/avatar.png" />

<input id="but1" type="button" value="隐藏" onclick="testCss();">

</body>

4.JavaScript 能够控制事件

1.页面初始化事件 onload

具体用法:

<script>

function    处理函数（）{

    //事件处理动作

}

</script>

<body   οnlοad=”处理函数”></body>

2.常见的javascript事件，事件的具体使用方法

1.页面初始化事件

<head>
<script>

function  testOnload(){

alert("页面初始化事件");

}

</script>

</head>

<body  onload="testOnload();">

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script>

//通过window对象调用onload事件

window.onload=function(){

alert("页面初始化事件");

}

</script>

</head>

2.按钮点击事件 onclick

<head>
<script>
function  testClick(){
alert("按钮点击事件");
}
</script>
</head>
<body>
<input type="button" value="测试按钮点击事件" onclick="testClick();"/>
</body>
</html>
<title></title>
<script>
window.onload=function(){
var  but1=document.getElementById("but1");//object HTMLInputElement
but1.onclick=function(){
alert("按钮点击事件2");
    }
}
</script>
</head>
<body>
<input id="but1" type="button" value="测试按钮点击事件2" />
</body>
</html>

3.onchange 事件，当用户改变输入字段的内容时触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function  testonchange(){
alert("输入内容被改变是触发");
}
</script>
</head>
<body>
<input type="text"  value="hello" onchange="testonchange();" />
</body>
</html>

4.onfocus当获得焦点时触发

5.onblur当失去焦点时触发

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script>

function  testonfocus(){
var text1=document.getElementById("text1");
text1.value="";
}
window.onload=function(){
var text1=document.getElementById("text1");
text1.onblur=function(){
var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
var val=text1.value;
var boo=reg1.test(val);
if(boo){
alert("手机号码正确，获取短息验证码");
}else{
alert("手机号码不正确，请重新输入");
}
}
}
</script>
</head>
<body>
<input id="text1" type="text"  value="请输入手机号码" onfocus="testonfocus();" /><br>
</body>
</html>

6.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var img1=document.getElementById("img1");
img1.onmouseover=function(){
img1.style.width="250px";
img1.style.height="250px";
}
img1.onmouseout=function(){
img1.style.width="150px";
img1.style.height="150px";
}
}
</script>
</head>
<body>
<img id="img1" src="imgs/avatar.png" />
</body>
</html>

7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//1.普通按钮type="button",无法触发表单提交事件onsubmit
//2.onsubmit事件对应的处理函数一定要有返回值【boolean】
//true---提交表单数据
//false---不提交表单数据
//3.表单的onsubmit="return 处理函数";
function  testOnsubmit(){
var text1=document.getElementById("text1");
var pass1=document.getElementById("pass1");
var span1=document.getElementById("span1");
var username=text1.value;
var password=pass1.value;
if(username=="zhangsan" && password=="123456"){
alert("登陆成功!");
return true;
}else{
span1.innerHTML="<font color='red' size='7'>用户名密码错误!</font>";
return false;
}
}
</script>
</head>
<body>
<span id="span1"></span>
<form action="#" method="get" onsubmit="return  testOnsubmit();">
用户名:<input id="text1" name="username" type="text" /><br>
密码:<input id="pass1" name="password"  type="password" /><br>
<input type="button" value="普通按钮" /><br>
<input type="submit" value="登陆" />
</form>
</body>
</html>

8.onkeydown 事件会在用户按下一个键盘按键时发生。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//1.testKeydown事件在调用的时候需要一个event参数
//2.event参数的keyCode属性得到键盘按键对应的数字。
function testKeydown(event){
var num=event.keyCode;
if(num==65 || num==37){
alert("向左移动");
}
if(num==68 || num==39){
alert("向右移动");
}
if(num==87 || num==38){
alert("向上移动");
}
if(num==83 || num==40){
alert("向下移动");
}
if(num==13){
alert("暂停");
}
}
</script>
</head>
<body onkeydown="testKeydown(event);">
</body>
</html>

6.创建和删除HTML 元素  

创建元素

document.createElement("元素名称");

document.createTextNode("文本内容");

父元素的dom对象.appendChild(node);

删除元素 父元素的dom对象.removeChild(子元素的dom对象);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script>
window.onload=function(){
var addbut=document.getElementById("add");
var deletebut=document.getElementById("delete");
addbut.onclick=function(){
//创建元素
var hdom=document.createElement("h1");
var htext=document.createTextNode("这是我添加的一个元素");
hdom.appendChild(htext);
var divdom=document.getElementById("div1");
divdom.appendChild(hdom);
}
deletebut.onclick=function(){
var divdom=document.getElementById("div1");
var hdom=document.getElementById("h1");
//删除元素
divdom.removeChild(hdom);
}
}
</script>
</head>
<body>
<div id="div1">
<h1 id="h1">测试添加和移除元素</h1>
</div>
<input id="add" type="button" value="添加元素"><br>
<input id="delete" type="button" value="删除元素"><br>
</body>
</html>

无奈源于不够强大

HJHO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM操作详解
brokyz
06-22 1051
本文将是我在学习DOM操作时的笔记
JavaScript 的 BOM对象 与 DOM对象
chuli0327的博客
10-30 230
BOM对象 ：Brower Object Model 浏览器对象模型 1.作用 ： 用来执行浏览器的相关操作 eg ： 浏览器的地址，弹出消息 一般情况下 ，window代表了BOM对象 - - window 对象是JavaScript 的内置对象，使用window 对象调用方法时可以省略window不写 2.消息框 ...
document对象获取HTML元素的三种常见方法
weixin_45936680的博客
05-06 3821
document常用获取HTML元素对象的常见方法有 1.根据元素的ID获取 document.getElementById(‘元素的ID’) 2.根据元素的类名获取 document.getElementsByClassName() 3.根据元素的标签名获取 document.getElementsByTagName(‘元素的标签名’) ...
js中document.getElementById()用法
热门推荐
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
Javascript 之 DOM案例（1）
Ivy_Ch的博客
08-27 387
1.点击按钮弹出对话框 <input type="button" value="弹出来" onclick="alert('我是弹框')"> 2.点击按钮修改超链接的地址和热点文字 // 根据id获取按钮，注册点击事件，增加事件处理函数 document.getElementById("bth").onclick()=function () { // 根据id...
获取HTML元素3个方法：document.getElementsByName()、document.getElementById()、document.getElementsByTagName()
小哥骑单车
11-24 6万+
获取HTML元素3个方法比较：document.getElementsByName()、document.getElementById()、document.getElementsByTagName() document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementBy...
关于document.getElementById的用法
GreenOfBamboo的专栏
07-26 2046
          document.getElementById("idname")是获取HTML或者XHTML的元素对象，或者是获取控件对象方法，进而可对元素属性操作或对控件的操作。但是document.getElementById的用法却不是获取元素或控件，而是用来检测浏览器的版本的。因为只有IE浏览器支持document.getElementById,或者其他浏览器未必支持它的所有特征，此
JavaScript DOM 对象深入了解
10-21
下面小编就为大家带来一篇JavaScript DOM 对象深入了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript DOM对象的学习实例代码
10-29
JavaScript DOM（Document Object Model）对象是用于操作网页...总之，JavaScript DOM对象提供了一种强大的方式来动态地操作和更新网页内容。通过学习和实践DOM对象，开发者可以创建更丰富、交互性更强的Web应用程序。
JavaScript变量Dom对象的所有属性
10-15
DOM对象允许我们通过JavaScript与网页内容交互，包括元素、属性、文本等。在JavaScript中，我们可以创建、访问和修改DOM对象的属性，以实现动态更新网页的效果。 在标题和描述中提到的“JavaScript变量Dom对象的...
JavaScript实现DOM对象选择器
10-21
主要为大家详细介绍了JavaScript实现DOM对象选择器,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
web核心概念 ------ JavaScript笔记
hspnb的博客
05-27 977
JavaScript是一门编程和Java语言类似。学习完自己动手练习，不要先看笔记！
JavaScript document.getElementById(“id“).onclick=tt 函数中带参数
qq_38394249的博客
02-25 1697
html： <input type="button" id="Button" name="Button" value="button" /> js: document.getElementById('Button').onclick = validata; function validata() { alert("我被调用了"); } 这样只能代用无参的函数 想要调用有参的,参考了 document.getElementById('Button').onclick = function (
java学习day41（JavaWeb）JavaScript高级
gaosong0623的博客
08-31 346
今日重点：1. 事件。
getElementById获取元素以及获取html和body
最新发布
lxllxl211的博客
10-31 993
【代码】getElementById获取元素以及获取html和body。
HTML中嵌套的JavaScript语言 document.getElementById（“”）函数的使用
qq_38261445的博客
11-18 5076
1.语法：var 变量 = document .getElementById (“某一个标签的ID名称”) 参数：某一个标签的ID名称――必选项，为字符串 (String) 。 如： 返回值：oElemen――对象 (Element) 。 &amp;amp;lt;ol id=&amp;quot;ol&amp;quot;&amp;amp;gt; &amp;amp;lt;li&amp;amp;gt;aa&amp;amp;lt;/li&amp
js 访问html对象属性,javascript中js根据Id获取html标签对象的方法—-document.getElementById()你会用吗?...
weixin_29505121的博客
06-04 1726
摘要：下文讲述js中document.getElementById方法的使用说明,如下所示；document.getElementById方法功能说明根据html对象的id获取对象，此方法用于返回一个html对象document.getElementById方法语法:objectInfo = document.getElementById(oId);---------------参数说明----...
JavaScript
qq_52060072的博客
08-27 5474
JavaScript基础笔记
JavaScript的DOM（1）
vfjcgg的博客
03-11 75
什么是DOM： 1.DOM ———— 》 Document Object Model 2.DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义， 用来操作html和xml功能的一类对象的集合，也有人称DOM是对html以及xml的标准编程接口 DOM的基本操作： 1.对节点的增删改查 查 查看元素节点 1.document代表整个文档 2.document.getElem...
Web前端开发技术-属性操作.pptx
07-07
通过PPT中的案例演示，我们了解到在DOM对象中可以使用“element.属性”的方式来获取内置的属性值，但是无法直接使用点语法获取自定义属性的值。在DOM中，可以使用getAttribute('属性')方法来返回指定元素的属性值。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值