JavaScript之DOM初识

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="" alt="" 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" alt="" 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" alt="" 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" alt="" 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: 文档对象模型

几个案例：

点击按钮弹窗：

先写函数再调用也可以:

点击按钮显示图片

点击按钮修改内容

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

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

点击按钮变成文本框

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

排他功能

点击超链接切换大图

点击按钮修改图片

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

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

一个按钮实现上面的需求

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

网页开关灯

猜你喜欢