我是靠谱客的博主 着急奇异果,最近开发中收集的这篇文章主要介绍JS中DOM操作(一) DOM 简单介绍Tips:,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

 

目录

 DOM 简单介绍

1.点击按钮显示图片

2.点击按钮修改p标签内容

3.点击按钮修改a标签的地址和热点文字

4.点击按钮设置多个p标签的文字内容

5.点击按钮修改图片的alt和title属性

6.排他功能

7.点击按钮修改性别和兴趣

8、点击按钮设置div的宽和高和背景颜色

9.点击按钮设置div隐藏和显示

10.点击按钮设置div的样式

11.改变页面整体颜色

Tips


JavaScript分三个部分:
     ECMAScript标准:JS的基本的语法
     DOM:Document Object Model --->文档对象模型----操作页面的元素
     BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器
    

 DOM 简单介绍

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

 

1.点击按钮显示图片

复制代码
1
2
3
4
5
6
7
8
9
10
var btnObj=document.getElementById("btn"); //为按钮注册点击事件,添加事件处理函数 btnObj.onclick=function () { //根据id获取图片的标签,设置图片的src属性值 var imObj=document.getElementById("im"); imObj.src="images/liuyan.jpg"; //设置图片的大小 imObj.width="300"; imObj.height="400"; };

2.点击按钮修改p标签内容

复制代码
1
2
3
4
5
6
7
//凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式 //根据id获取按钮,为按钮注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=function () { //根据id获取p标签,设置内容 document.getElementById("p1").innerText="这是一个p"; };

3.点击按钮修改a标签的地址和热点文字

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script> //根据id获取按钮,注册点击事件,添加事件处理函数 // document.getElementById("btn").onclick = function () { // //根据id获取超链接,设置href属性 // document.getElementById("ak").href = "http://www.nihao.cn"; // //根据id获取超链接,设置文字内容 // document.getElementById("ak").innerText = "你好"; // }; //优化后的: document.getElementById("btn").onclick = function () { //根据id获取超链接,设置href属性 var aObj = document.getElementById("ak"); aObj.href = "http://www.nihao.cn"; //根据id获取超链接,设置文字内容 aObj.innerText = "你好"; }; </script>

4.点击按钮设置多个p标签的文字内容

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</head> <body> <input type="button" value="显示效果" id="btn"/> <div id="dv1"> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> </div> <div id="dv2"> <p>嘎嘎</p> <p>嘎嘎</p> <p>嘎嘎</p> <p>嘎嘎</p> </div> <script> //document.getElementsByTagName("标签的名字");返回的是一个伪数组, //无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组 //根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=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>

5.点击按钮修改图片的alt和title属性

复制代码
1
2
3
4
5
6
7
8
<script> document.getElementById("btn").onclick = function () { //返回的是一个伪数组 var imgObjs = document.getElementsByTagName("img"); imgObjs[0].alt = "改了"; imgObjs[0].title = "现实吧"; }; </script>

6.排他功能

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="没被点"/> <input type="button" value="没被点"/> <input type="button" value="没被点"/> <input type="button" value="没被点"/> <input type="button" value="没被点"/> <input type="button" value="没被点"/> <script> //获取所有的按钮,分别注册点击事件 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 = "被点了"; }; } //console.log(i);//6 //for循环是在页面加载的时候,执行完毕了 // for(var k=0;k<5;k++){ // // } // console.log(k);// //事件是在触发的时候,执行的 </script> </body> </html>

7.点击按钮修改性别和兴趣

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</script> <br /> <input type="button" value="选择兴趣" id="btn2"/> <input type="checkbox" value="1" name="xingqu" />吃饭 <input type="checkbox" value="2" name="xingqu" />睡觉 <input type="checkbox" value="3" name="xingqu" id="ck1" />打豆豆 <input type="checkbox" value="4" name="xingqu" />打篮球 <input type="checkbox" value="5" name="xingqu" />打足球 <input type="checkbox" value="6" name="xingqu" id="ck2" />打铅球 <script> my$("btn2").onclick=function () { my$("ck1").checked=true; my$("ck2").checked=true; }; </script>

8、点击按钮设置div的宽和高和背景颜色

复制代码
1
2
3
4
5
6
7
8
9
<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>

9.点击按钮设置div隐藏和显示

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body> <input type="button" value="隐藏" id="btn"/> <div id="dv"> </div> <script src="common.js"></script> <script> //根据id获取按钮,注册点击事件,添加事件处理函数 my$("btn").onclick=function () { //判断当前点击的按钮的value属性值 if(this.value=="隐藏"){ my$("dv").style.display="none";//隐藏 this.value="显示"; }else if(this.value=="显示"){ my$("dv").style.display="block";//显示 this.value="隐藏"; } }; </script> </body>

10.点击按钮设置div的样式

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .cls { width: 300px; height: 200px; background-color: yellow; border: 2px solid red; } </style> </head> <body> <input type="button" value="设置样式" id="btn"/> <div id="dv"></div> <script src="common.js"></script> <script> //设置div的样式 my$("btn").onclick = function () { // var dvObj = my$("dv"); // dvObj.style.width = "300px"; // dvObj.style.height = "300px"; // dvObj.style.backgroundColor = "yellow"; // dvObj.style.border = "10px solid red"; //在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className //my$("dv").className="cls"; }; </script> </body> </html>

11.改变页面整体颜色

复制代码
1
2
3
4
5
6
<script> my$("btn").onclick = function () { //获取body标签 document.body.className = document.body.className != "cls" ? "cls" : ""; }; </script>

Tips:

  • 凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式,eg:document.getElementById("p1").innerText="这是一个p";
  • document.getElementsByTagName("标签的名字");返回的是一个伪数组,
    无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
  • 在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
  • function my$(id) {
        return document.getElementById(id);
      }//减少重复代码
  •   在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
      那么,那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了,eg:7
  • html中属性和值是自己的,并且只有一个的,可以只写这个属性,不用赋值
  • readonly="readonly"表示文本只读
  • 凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可,如:my$("dv").style.backgroundColor = "pink";
  • 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
     my$("dv").className="cls";

最后

以上就是着急奇异果为你收集整理的JS中DOM操作(一) DOM 简单介绍Tips:的全部内容,希望文章能够帮你解决JS中DOM操作(一) DOM 简单介绍Tips:所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(32)

评论列表共有 0 条评论

立即
投稿
返回
顶部