JavaScript学习8-CSDN博客

本文链接：https://blog.csdn.net/qq_44152890/article/details/122673855

1、JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。
典型：var domObj = document.getElementById(“id”);
BOM：Browser Object Model（浏览器对象模型）
关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
2、DOM和BOM的区别和联系？
BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！
3、DOM（获取文本框的value）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取文本框的value属性</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("ii").onclick=function(){
                    alert(document.getElementById("kk").value);
                }
            }
        </script>
        <input type="text" id="kk"/>
        <input type="button" value="文本框value" id="ii"/>
        <br>
        <!--
            blur事件：失去焦点
            以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。
            也可以写成<input type="text" onblur="alert(this.value)" />
        -->
        <input type="text" onblur="window.alert(this.value)" />
    </body>
</html>

4、innerHTML与innerText

<!DOCTYPE html>
<html>
    <head>
        <title>innerText和innerHTML</title>
        <style type="text/css">
            #hh{
                background-color: aquamarine;//设置背景颜色
				width: 300px;
				height: 300px;
				border: 1px black solid;//设置边框
				position: absolute;//设置对齐位置
				top: 100px;
				left: 100px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            /*
            innerText和innerHTML属性有什么区别？
				相同点：都是设置元素内部的内容。
				不同点：
					innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
					innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
            */
            window.onload=function(){
                document.getElementById("oo").onclick=function(){
                    hh.innerHTML="adsssssss";
                    hh.innerHTML="<font color='red'>用户名不能为空！</font>"//会执行引号内的htmldaima
                    hh.innerText="<font color='red'>用户名不能为空！</font>"//不会执行引号内的htmldaima
                }
            }
        </script>
        <input type="button"  value="获取div的文字" id="oo"/>
        <div id="hh"></div>
    </body>
</html>