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=""  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>

原文地址：https://www.cnblogs.com/hzdwwzz/p/10310627.html

时间： 2024-10-10 04:26:09

JavaScript之DOM初识的相关文章

JavaScript总结--DOM

对于Web前端开发,归根结底是三部分内容: 结构:HTML 表现:CSS 行为:JavaScript 在行为方面,主要是由JavaScript通过DOM对网页进行操作来实现的.DOM(Document Object Model),即文档对象模型,可以理解为一种接口. 用导图总结一下DOM涉及的内容. 这里,我们经常用的操作就是元素的获取,添加,如:getElementById,CreateElement,appendChild.不论是之后学的JQuery,还是Ajax,都要对网页进行操作,所以D

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手

文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和DOM一般常常作为一个总体,由于Javascript通常都是用来进行DOM操作和交互的. 主要内容来自:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/ 关于DOM.有些

JavaScript与DOM（上）

本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DO

JavaScript HTML DOM EventListener

JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); 尝试一下 » addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

javascript之DOM优化

DOM访问和操作是现代网页应用中很重要的一部分.但每次你通过“桥梁”从ECMAScript到DOM时,都会被收取“过路费”.为减少DOM编程中的性能损失,具体要注意的有: 一.最小化DOM访问,在javascript端做尽可能多的事. Js代码   function innerHTMLLoop() { for (var count = 0; count < 15000; count++) { document.getElementById('here').innerHTML += 'a'; }