码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript之DOM初识

时间：2019-01-23 18:41:29      阅读：182      评论：0      收藏：0      [点我收藏+]

标签：body   splay   对象   元素   背景颜色   事件   弹框   颜色   href   

JavaScript分三个部分:

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

DOM: 文档对象模型

 文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看成是一个对象
 XML文件也可以看成是一个文档

 HTML:展示信息,展示数据的
 XML:侧重于存储数据
 html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象

 页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
 标签可以嵌套,标签中有标签,元素中有元素

 html页面中都有一个根标签--html--也叫根元素

 页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)

 文档:一个页面就是一个文档

 元素(element):页面中的所有的标签都是元素,元素可以看成是对象

 节点(node):页面中所有的内容都是节点:标签,属性,文本
 root:根


 页面就是文档--document,文档中有根元素:html


 由文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)

几个案例：

点击按钮弹窗：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<script>
document.getElementById("btn").onclick=function () {
    alert("弹窗了！");
};

//点击操作:------>事件:就是一件事,有触发和响应,事件源
//按钮被点击,弹出对话框
//按钮---->事件源
//点击---->事件名字
//被点了--->触发了
//弹框了--->响应

</script>
</body>
</html>

先写函数再调用也可以:

<script>
    function f1() {
        alert("Hello");
    }
    var btnObj=document.getElementById("btn").onclick=f1;//不加括号
</script>

注意：先有按钮,才能获取,获取之后才能注册事件

点击按钮显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<img src=""  id="image" />
<script>
    var btn1=document.getElementById("btn");
    btn1.onclick=function () {
        var img1=document.getElementById("image");
        img1.src="images/xxx.jpg";//这是图片的路径
        img1.width="300";
        img1.height="400";//不用加px
    };//记得加分号
</script>
</body>
</html>

点击按钮修改内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击修改内容" />
<p id="p1">
    还没修改的文本
</p>
<script>
//凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
    document.getElementById("btn").onclick = function () {
        document.getElementById("p1").innerText = "点击按钮后就修改了内容了";
    };

</script>
</body>
</html>

点击按钮修改多个p标签的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击修改内容"/>
<div id="div1">
    <p>还没修改的文本</p>
    <p>还没修改的文本</p>
    <p>还没修改的文本</p>
    <p>还没修改的文本</p>
    <p>还没修改的文本</p>
</div>
<div id="div2">
    <p>还没修改的文本2</p>
    <p>还没修改的文本2</p>
    <p>还没修改的文本2</p>
    <p>还没修改的文本2</p>
    <p>还没修改的文本2</p>
</div>
<script>
    //只修改div1的内容
    // document.getElementById("btn").onclick = function () {
    //     var pObjs = document.getElementById("div1").getElementsByTagName("p");
    //     for (var i = 0; i < pObjs.length; i++) {
    //         pObjs[i].innerText = "修改了";
    //     }
    // };
    //修改全部p标签的内容
    document.getElementById("btn").onclick = function () {
        var pArr = document.getElementsByTagName("p");
        for (var i = 0; i < pArr.length; i++) {
            pArr[i].innerText = "全部修改了";
        }
    };
</script>
</body>
</html>

点击按钮修改文本框的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="修改内容" id="btn"/></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<script>
    document.getElementById("btn").onclick = function () {
        var inputS = document.getElementsByTagName("input");
        for (var i = 0; i < inputS.length; i++) {
            if (inputS[i].type != "button") {
                inputS[i].value = "哈哈，修改了";
            }//end if
        }//end for
    };
</script>
</body>
</html>

点击按钮变成文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="修改内容" id="btn"/></br>
<script>
    //在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        this.value="按钮变成了文本框了";
        this.type="text";
    };
</script>
</body>
</html>

点击图片，修改自身的宽和高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<img src="images/xxx.jpg"  id="im"/>
<script>
  //点击图片,修改自身的宽和高
  var imgObj = document.getElementById("im");
  imgObj.onclick = function () {
    this.width = "200";
    this.height = "300";
  };
</script>
</body>
</html>

排他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<script>
    //获取所有的按钮,分别注册点击事件
    var btnObjs = document.getElementsByTagName("input");
    for (var i = 0; i < btnObjs.length; i++) {
        btnObjs[i].onclick = function () {
            for (var j = 0; j < btnObjs.length; j++) {
                btnObjs[j].value = "没变化";
            }
            this.value = "变化了";
        };
    }
</script>
</body>
</html>

点击超链接切换大图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg"  id="im"></a>
<script>
  //点击图片标签,设置图片标签的src路径为超链接中大图的路径

  document.getElementById("im").onclick=function () {
    this.src=document.getElementById("ak").href;
    return false;
  };

</script>
</body>
</html>

点击按钮修改图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg"  id="im">
<script>
  function my$(id) {
    return document.getElementById(id);
  }


  my$("btn").onclick=function () {
      my$("im").src="images/1.jpg";
  };
</script>

</body>
</html>

点击按钮改变div的背景颜色、宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="修改div" id="btn" />
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick=function () {
        var dvobj=document.getElementById("dv");
        dvobj.style.height="300px";
        dvobj.style.width="200px";
        dvobj.style.backgroundColor="yellowgreen";
    };
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn" />
<input type="button" value="显示" id="btn2" />
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").style.display="none";
    };
    document.getElementById("btn2").onclick=function () {
        document.getElementById("dv").style.display="block";
    };
</script>
</body>
</html>

一个按钮实现上面的需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv {
            width: 300px;
            height: 200px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick = function () {
        //判断当前点击的按钮的value属性值
        if (this.value == "隐藏") {
            document.getElementById("dv").style.display = "none";
            this.value = "显示";
        } else if (this.value == "显示") {
            document.getElementById("dv").style.display = "block";
            this.value = "隐藏";
        }
    };

</script>
</body>
</html>

点击按钮,通过类样式的方式设置div的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv {
            width: 300px;
            height: 200px;
            background-color: #cccccc;
        }

        .none {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick = function () {
        var dvobj = document.getElementById("dv");
        //判断的是div是否应用了类样式
        if (dvobj.className != "none") {
            dvobj.className = "none";
            this.value = "显示";
        } else {
            dvobj.className = "";
            this.value = "隐藏";
        }

    };
</script>
</body>
</html>

网页开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .black {
            background-color: black;
        }
    </style>
</head>
<body>
<input type="button" value="开/关灯" id="btn"/>
<script>
    document.getElementById("btn").onclick=function () {
        document.body.className = document.body.className != "black" ? "black" : "";
    }
</script>
</body>
</html>

JavaScript之DOM初识

标签：body   splay   对象   元素   背景颜色   事件   弹框   颜色   href   

原文地址：https://www.cnblogs.com/hzdwwzz/p/10310627.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！