初学之BOM和DOM

最新推荐文章于 2022-06-30 19:58:15 发布

紫色下雪

最新推荐文章于 2022-06-30 19:58:15 发布

阅读量328

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xy_best_/article/details/104064808

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

了解

JavaScript分为 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框语法：

alert("你看到了吗？");

在这里插入图片描述
确认框语法：

confirm("你确定吗？");

在这里插入图片描述
提示框语法：

prompt("请在下方输入","xxxxxxxxxxx");

在这里插入图片描述

计时器相关

setTimeout()

var timer = setTimeout("js语句", 毫秒)

在一定时间间隔之后来执行代码,
例如:

var timer = setTimeout(function () {alert("hello");} 1000)

clearTimeout(timer);
// 取消setTimeout设置

clearTimeout()

clearTimeout(timer) //取消setTimeout设置

setInterval()

可按照指定的周期（以毫秒计）来调用函数或计算表达式。

该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

var T = setInterval("js语句", 毫秒)

clearInterval()

可取消由 setInterval() 设置的 timeout。

参数必须是由 setInterval() 返回的 ID 值

clearInterval(setinterval返回的ID值T)

定时器示例

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>定时器显示</title>
	</head>
	<body>

	<input type="text" id="s1">
	<input type="button" id="start" value="开始">
	<input type="button" id="stop" value="停止">

	<script>
		var IntervalID;  // 定义全局变量

		function foo() {
			// 得到时间
			var now = new Date();
			var nowstr = now.toLocaleString(); //2020/1/7 下午5:00:40
			// console.log(nowstr);

			// 把时间放入到input框中
			var s1Ele = document.getElementById("s1");
			s1Ele.value = nowstr;
		}
		
		// 给开始按钮绑定事件
		var startbutton = document.getElementById("start");
		startbutton.onclick = function () {  //点击之后执行该函数
			if (IntervalID === undefined){
				IntervalID = setInterval(foo,1000);  // 每秒执行一次该函数，1000毫秒
				console.log("开始按钮的ID值:",IntervalID);
			}

		};
		// 给结束按钮绑定事件
		var stopbutton = document.getElementById("stop");
		stopbutton.onclick = function () { // 点击停止按钮执行该函数

			clearInterval(IntervalID); // clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
			// clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
			// 注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：
			console.log("停止按钮的ID值:",IntervalID);
			IntervalID = undefined;
		};

	</script>

	</body>

DOM相关

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。
在这里插入图片描述
JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找标签

document.getElementById("#id")           根据ID获取一个标签
document.getElementsByClassName(".class")   根据class属性获取
document.getElementsByTagName("div")     根据标签名获取标签合集

创建节点

createElement(“标签名”)

var divEle = document.createElement("div");

添加节点

appendChild(newnode)添加子节点(最后的位置)

某个节点.appendChild(新节点)

添加到某个节点之前

某个节点.insertBefore(新节点, 某个节点)

示例：

<div id="d1">div1
	<p id="p1">1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<script>
	//要配合函数使用:
	var pEle = document.createElement("p"); // 创建p标签
	pEle.innerText = "p1";
	var d1Ele = document.getElementsById("d1");
	
	d1Ele.onclick = function(){
		this.style.backgroundColor = "green"; //点击后将颜色变为绿色
		this.appendChild(pEle); // 添加创建的标签
	};
</script>

删除节点

removeChild()

某个节点.removeChild(待删除的节点)

替换节点

replaceChild()

某个节点.replaceChild(新节点, 某个节点)

属性节点

获取文本的值

var p1Ele = document.getElementId("#p1")
p1Ele.innerHTML // 如果设置值的话，p1Ele.innerHTML = "p1"
p1Ele.innerText

获取值的操作

var p1Ele = document.getElementId("#p1")
p1Ele.value // 获取值

事件

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onfocus        元素获得焦点。
onblur         元素失去焦点。
onchange       域的内容被改变。
onkeydown      某个键盘按键被按下。  应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

绑定事件

方式一绑定：

<div class="c1 c2" onclick="foo(this)">div</div>
<script>
	function foo(ths) {
		ths.style.backgroundColor = "green";
	}
</script>

方式二绑定

<div id="c2">div</div> // 这里不能用class，也不能用多个id值 （例如:id= "c1 c2"或者 class="c2"）
<script>
	 var divEle2 = document.getElementById("c2"); // 这里不能用ClassName，多个id值也不行
	 divEle2.onclick=function () {
		this.style.backgroundColor = "green";
	 }
</script>

点击变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击变颜色</title>

    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: #1b3249;
        }

        .c2 {
            background-color: yellow;
        }
    </style>


</head>
<body>

<div class="c1 c2" onclick="foo(this)">div</div>
<div class="c1 c2">div</div>
<div class="c1 c2">div</div>
<div class="c1 c2">div</div>
<div class="c1 c2">div</div>

<script>
    function foo(ths) {
        ths.classList.toggle("c2")
    }

    var divEle = document.getElementsByTagName("div"); // 获取所有元素
    for (var i=0;i<divEle.length;i++){ // 循环div
        divEle[i].onclick=function(){ // 点击事件
            // onclick  当用户点击某个对象时调用的事件句柄。
            this.classList.toggle("c2")
        }


    }

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

搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

    <style>
        #s1 {
            color: red;
            font-weight: bolder;
            font-size: larger;
            /*height: 30px;*/
            border: 1px solid palegreen;
        }

        #but{
            color: darkorchid;
            margin-left: 20px;
            font-size: larger;
            border: 1px dotted darkmagenta;
        }
    </style>

</head>

<body>

<input id="s1" type="text" value="一场雨">

<input id="but" type="button" value="搜索">

<script>

    var s1Ele = document.getElementById("s1");

    // 获取焦点
    s1Ele.onfocus = function () {
        if (this.value === "一场雨") {
            this.value = ""
        }
    };

    // 失去焦点
    s1Ele.onblur=function () {
        if (!this.value.trim()){
            this.value = "一场雨"
        }
    };

    // 点击搜索后，弹出一个输入框值的内容
    var buttonEle = document.getElementById("but");
    buttonEle.onclick=function () {
        alert("正在搜索关键字："+s1Ele.value)
    }

</script>


</body>
</html>

选择器联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择框联动</title>
    <style>
        #s1 {
            /*height: 20px;*/
            font-size: larger;
            color: pink;
        }

        #s2{
            margin-left: 20px;
            color: indigo;
            font-size: larger;
        }

    </style>

</head>
<body>

<select name="" id="s1">
    <option value="0">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">河南</option>
</select>

<select name="" id="s2">
    <option value="0">请选择</option>
</select>

<input id="s3" type="button" value="提交" style="font-size: larger;margin-left: 20px">


<script>

    var data = {
        0:["请选择"],
        1:["海淀区","朝阳区","昌平区"],
        2:["浦东新区","静安区","徐汇区"],
        3:["郑州市","周口市","信阳市"]
                };

    var s1Ele = document.getElementById("s1");

    var s2Ele  = document.getElementById("s2");

    // 绑定事件
    s1Ele.onchange = function () {

        //每次清空之前选择的内容
        s2Ele.innerHTML = "";

        // 取到value值然后找到该省对应的区或者市
        var areas = data[s1Ele.value];

        for (var i=0; i<areas.length;i++){

            // 给id=s2的select标签创建option标签
            var optionEle = document.createElement("option");

            // 将值写入到文本内容中
            optionEle.innerText = areas[i];

            //将创建的option添加到id=s2的select标签中
            s2Ele.appendChild(optionEle)
        }

    };

    var s3Ele = document.getElementById("s3");
    s3Ele.onclick = function () {
        alert("已提交！")
    }


</script>

</body>
</html>

紫色下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学之BOM和DOM

了解：JavaScript分为 ECMAScript，DOM，BOM。BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。警告框语法...
复制链接

扫一扫