第一周 Web开发入门(下)-CSDN博客

本文链接：https://blog.csdn.net/DwightYu/article/details/110930501

七.JavaScript对象模型---BOM对象

使JavaScript可以与浏览器进行对话。

1.window对象

window.innerHeight - 浏览器窗口的内高度(以像素计)

window.innerWidth - 浏览器窗口内宽度

2.location对象

window.location.href 返回当前页面的href（url）

window.location.hostname 返回web主机的域名

window.location.pathname 返回当前页面的路径或文件名

window.location.protocol 返回使用的web协议（http/https）

window.location.assign 加载新文档

3.history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

方法描述

back() 加载history 列表中的前一一个URL

forward() 加载history 列表中的下一个URL

go() 加载history列表中的某个具体的页面

window.alert();
window.setInterval();
window.setTimeout();
window.confirm();//确认框
console.log("res");
var res=window.prompt("请输入你的性别：")

八.JavaScript对象模型---DOM对象

DOM节点分类：元素节点、文本节点、属性节点

1.获得节点

getElementByld()方法（ID引用）

元素的id属性值是该元素对象在HTML文档中的唯一标识，使用getElementByld()方法通过一个独一无二的id属性值返回相应的元素地

getElementByTagName()方法（）

返回文档里指定标签tag的元素的对象数组可通过标签调用

parent.getElementsByTagName(tag)

其中tag为指定标签。

var div=document.getElementByID("one");     //全部标签中寻找
var arr1=div.getElementsByTagName("span");  //只在div标签内子标签寻找

getElementByClassName("two")

返回文档里指定class的元素的对象数组可通过标签调用

document.getElementsByName("last")

通过标签的name属性查找

2.对元素的三种操作

.innerTest、.innerHTML、.getAttribute、.setAttribute

//设置内容
var p=document.getElementByID("three");
p.innerText="sikiedu.com";
p.innerHTML="1324";
p.innerHTML="<font style='red'>ciki</font>"


//设置属性
var myfont=document.getElementByID("myfont");
myfont.setAttribute("color","green");
var size = myfont.getAttribute("size");

myfont.setAttribute("style","font-family:幼圆");

3.修改超链接、图片、复选框和css样式的单独函数

<body>
    <a href="#" id="mya">进入siki学院</a>
    <img src="img/1.png" id="myimg">
    <input type="checkbox" id="mycheckbox">
    <div id="mydiv">
        1234556
    </div>
</body>

<script>
    var mya=document.getElementByID("mya");
    var myimg=document.getElementByID("myimg");
    var mycheckbox=document.getElementByID("mcheckbox");
    var mydiv=document.getElementByID("mydiv") 
    mya.setAttribute("href","www.baidu.com");
    myimg.setAttribute("src","img/2.jpg");
    mycheckbox.setAttribute("checked","true");
    

    mya.href="www.baidu.com";
    myimg.src="img/2.jpg";
    mycheckbox.checked=true;

    mydiv.style.fontsize="20px";

</script>

九.JavaScript事件

1.窗口事件

用户与页面其他元素交换时触发的事件，如页面加载完成可以触发的事件、改变窗口大小可以触发事件等。窗口事件主要包括load、unload、abort、error、scroll等

如:window.οnlοad=function(){} //页面完全加载完之后

img.οnlοad=function(){} //图像完全加载完之后

2.光标事件

光标事件主要指页面元素对焦点的获得和失去。不是所有对象都具有光标事件，通常，表单输入域input控件、textarea控件能够获得焦点，具有光标事件。

如focus----对象获得焦点时

blur----从一个对象失去焦点

οnblur="函数"，失去焦点时执行什么函数。

change----文字变化或列表选项变化

3.鼠标事件

如onclick----单击鼠标键

如mouseUp----松开鼠标键

4.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick="divClick()" id="myspan">DOM事件div</div>     //直接添加
	</body>
</html>

<script type="text/javascript">
	function divClick(){
		console.log("我被点击了");
	}
	var myspan=document.getElementById("myspan");
	myspan.onclick=function()                             //添加属性
	{
		console.log("span被点击了");
	}
	myspan.addEventListener("click",spanCLick);            //用addEventListener
	function spanClick()
	{
		console.log("span被点击了");
	}
</script>