JavaScript文档对象模型DOM


Posted in Javascript onNovember 20, 2021

前言:

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML

一、JavaScript 能够改变页面中的所有 HTML 元素

1、通过 id 找到 HTML 元素

找见HTML某个特定的标签,并做修改

<body>
    <div calss="001">我是谁</div>
    <script>
        var x = document.getElementById("001");
        x.innerHTML = "我是勇敢牛牛,不怕困难";
    </script>
</body>
<body>

 <p id="intro">你好牛牛!</p>
 <p>该实例展示了 <b>getElementById</b> 方法!</p>
 <script>
  x=document.getElementById("intro");
  document.write("<p>文本来自 id 为 intro 段落: " +  x.innerHTML + "</p>");
 </script>

</body>

2、通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);

查找 id=“main” 的元素,然后查找 id=“main” 元素中的第一个 <p> 元素:

//第一种写法
var x = document.getElementById("main");
var y = x.getElementsByTagName("p")[0];
//找出HTML中所有的p标签,并且把第一个标签内容换掉
var y = document.getElementsByTagName("p");
y[0].innerHTML = "勇敢牛牛,不怕困难"
<script>
 var x=document.getElementById("main");
 var y=x.getElementsByTagName("p");
 document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
</script>

3、通过类名找到 HTML 元素

<body>
    <p class="intro">你好牛牛!</p>
    <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
    <script>
        x = document.getElementsByClassName("intro");
        document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    </script>
</body>

修改此类标签的元素内容:

<body>
    <p class="intro">你好牛牛!</p>
    <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
    <script>
        x = document.getElementsByClassName("intro")[0];
        x.innerHTML = "修改标签内容";
        // document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    </script>
</body>

4、JavaScript 能够改变页面中的所有 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值

<img id="image" src="smiley.gif" width="160" height="120">
<script>
 document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

5、JavaScript 能够改变页面中的所有 CSS 样式

JavaScript HTML DOM - 改变CSS

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
 <p id="p1">Hello World!</p>
 <p id="p2">Hello World!</p>
 <script>
  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="larger";
 </script>
 <p>以上段落通过脚本修改。</p>
</body>
</html>

6、JavaScript 能够对页面中的所有事件做出反应

HTML DOM 来分配事件:

意思就是:当我干某件事的时候,触发一个怎样的功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

 <p>点击按钮执行 <em>displayDate()</em> 函数。</p>
 
 <button id="myBtn">点我</button>
 
 <script>
  document.getElementById("myBtn").onclick=function(){
   displayDate()};
  function displayDate()
  {
   
      document.getElementById("demo").innerHTML=Date();
  }
 </script>
 
 <p id="demo"></p>

</body>
</html>

如下:

JavaScript文档对象模型DOM

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
</head>
<body>

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
 
 <script>
  function mOver(obj)
  {
   
   obj.innerHTML="Thank You"
  }
  
  function mOut(obj)
  {
   
   obj.innerHTML="Mouse Over Me"
  }
 </script>

</body>
</html>

JavaScript文档对象模型DOM

到此这篇关于JavaScript文档对象模型DOM的文章就介绍到这了,更多相关JavaScript文档对象模型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
四十九个javascript小知识实用技巧
Nov 20 #Javascript
js不常见操作运算符总结
Nov 20 #Javascript
javascript的setTimeout()使用方法总结
Nov 20 #Javascript
JavaScript异步操作中串行和并行
Nov 20 #Javascript
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
利用 JavaScript 构建命令行应用
Nov 17 #Javascript
You might like
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中的is和id用法分析
2015/01/26 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
工作所在部门证明
2014/09/21 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS