指数爆炸's Notes

Appearance

对象 ​

BOM ​

BOM 是浏览器对象模型，允许 JavaScript 与浏览器对话

Window 浏览器窗口对象 ​

[!summary] window.history 返回窗口的 History 对象 window.location 返回窗口的 Location 对象 window.navigator 返回窗口的 Navigator 对象 window.screen 返回窗口的 Screen 对象

alert() 显示带有消息和确定按钮的警报框 confirm() 显示包含消息以及确定和取消按钮的对话框。根据点击返回 true 或 false setInterval(函数名,周期) 周期性执行指定的代码 setTimeout(函数名,延迟数值) 在经过指定的时间之后执行代码

alert() ​

confirm() ​

js
confirm("hello javascript!\nhello javascript!");

![[JavaWeb Draw#^group=7iLBg2GO]]

js
let text;
if (confirm("点击按钮") == true) {
	text = "你点了确定";
} else {
	text = "你点了取消";
}

console.log(text);

setInterval ​

js
setInterval(() => {
	alert("hello");
}, 2000);


每隔2秒弹出hello

setTimeout ​

js
setTimeout(() => {
	alert("hello");
}, 2000);


打开网页后延迟2秒会弹出hello

Screen 屏幕对象 ​

History 历史记录对象 ​

Location 地址栏对象 ​

[!summary] location.href 获取整个 URL

js
alert("我们要去百度了")
location.href = "https://www.baidu.com/";


点击完提示框后，会自动跳转到baidu的官网

DOM ​

当 HTML 文档加载到 Web 浏览器中时，它就变成了一个 DOM

[!summary] 属性 innerHTML 设置或返回元素的内容

[!summary] 方法 getElementById() 返回拥有指定 id 属性 的单个 Element 元素 getElementsByClassName() 返回指定 类名 的 Element 对象数组 getElementsByName() 返回 name 属性 的 Element 对象数组 getElementsByTagName() 返回指定 标签名称 的 Element 对象数组

核心 DOM ​

  • Document 整个文档对象
  • Element 元素对象
  • Attribute 属性对象
  • Text 文本对象
  • Comment 注释对象
js
//document是整个文档对象，调用getElementById方法找到id为demo的Element对象，再调用innerHTML设置这个元素的内容
document.getElementById("demo").innerHTML = "Hello JavaScript";

XML DOM ​

专门用于 XML 文件的 DOM 规范

HTML DOM ​

HTML DOM 是专门用于 HTML 的 DOM 规范，其中把每个 HTML 标签都封装成了一个元素

HTMLParagraphElement ​

html
<body>
	<p id="p2">责任编辑：指数爆炸</p>
</body>

<script>
    var ide = document.getElementById("p2")  //现在已经拿到了这个对象了
    alert(ide);
    
    ide.innerHTML = "指数爆炸";  //会把<p>里的内容修改成“指数爆炸”
</script>


[object HTMLParagraphElement]

HTMLImageElement ​

[!summary] 属性 src 设置或返回图像的 src 属性值

html
<body>
	<img class="img" src="https://1b2a.net/img/tv/PwGW.avif" width="300"/>
	<img class="img" src="https://jwc.zjxu.edu.cn/__local/C/5E/5F/C3D5DB87F094D6680FD055B1029_D0FE4C7D_1C003.jpg" width="300"/>
</body>

<script>
    var imges = document.getElementByClassName("img");
    for(int i=0; i<imges.length; i++){
	    alert(imges[i]);
    }
</script>


[object HTMLImageElement]
[object HTMLImageElement]

HTMLInputElement ​

[!summary] 属性 checked 设置或返回复选框的选中状态。可以设置为 true 或 false

html
<body>
<input type="hidden" name="id" value="1">
</body>

<script>
    var namees = document.getElementsByName("id");
    for (var i = 0; i < namees.length; i++) {
        alert(namees[i]);
    }
</script>


[object HTMLInputElement]

HTMLDivElement ​

html
<body>
	<div>
		…………
	</div>
</body>

<script>
    var tages = document.getElementsByTagName("div");
    for (var i = 0; i < namees.length; i++) {
        alert(tages[i]);
    }
</script>


[object HTMLDivElement]