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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python学习教程之使用py2exe打包
2017/09/24 Python
彻底理解Python list切片原理
2017/10/27 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python实现支付宝转账接口
2019/05/07 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python plotly画柱状图代码实例
2019/12/13 Python
django迁移文件migrations的实现
2020/03/31 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
super()与this()的区别
2016/01/17 面试题
介绍一下linux的文件权限
2012/02/15 面试题
三八妇女节活动主持词
2014/03/17 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
比赛口号大全
2014/06/10 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
怎样写好工作计划
2019/04/10 职场文书
新手初学Java网络编程
2021/07/07 Java/Android