JavaScript自学笔记之学步阑珊

最新推荐文章于 2019-06-18 11:30:00 发布

杰希默克

最新推荐文章于 2019-06-18 11:30:00 发布

阅读量503

点赞数

分类专栏：前端文章标签： javascript 对象浏览器

本文链接：https://blog.csdn.net/u013848401/article/details/52124489

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

BOM和DOM介绍

BOM，Browser Object Model，浏览器对象模型。
BOM主要提供了访问和操作浏览器各组件的方式。

浏览器组件：
window（浏览器窗口）
location（地址栏）
history（浏览历史）
screen（显示器屏幕）
navigator（浏览器软件）
document（网页）

DOM，Document Object Model，文档对象模型。
DOM主要提供了访问和操作HTML标记的方式。

HTML标记：
图片标记
表格标记
表单标记
body、html标记
……

BOM和DOM不是JS的内容。它们是W3C指定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。
换句话说：BOM和DOM都是由一组对象构成的。

BOM对象结构
window浏览器窗口对象是JS中最大的对象。其他所有的对象，都是window的子对象。
包括：
①document文档对象，代表一个网页。
②location地址栏对象，对地址栏的操作。
③history历史记录对象，对历史记录尽心操作。
④navigator浏览器软件对象，主要用来判断用户使用的什么浏览器，可以解决兼容性问题。
⑤screen屏幕对象，
获取屏幕的相关信息。

document文档对象包括：img对象、table对象、form对象、input对象、body对象、html对象、div对象、span对象。

Window对象属性

name：指浏览器窗口的名字或者框架的名字。这个名字是给<a> 标记的target属性来用的。
设置窗口的名字：window.name=”newWin”
top：代表最顶层窗口。如：window.top
parent：代表父级窗口，主要用于框架。
self：代表当前窗口，主要用于框架中。
innerWidth：指浏览器窗口的内宽（不含菜单栏、工具栏、地址栏、状态栏），该属性Firefox支持。
在IE下，使用document.documentElement.clientWidth来代替window.innerWidth
innerHeight：指浏览器窗口的内高（不含菜单栏、工具栏、地址栏、状态栏），该属性Firefox支持。
在IE下，使用document.documentElement.clientHeight来代替window,innerHeight
document.documentElement就是<html>标记对象
document.body就是<body>标记对象

window对象方法

alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确认按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口

open()方法
功能：打开一个新的浏览器窗口。
语法：var winobj = window.open([url],[name],[options]);
说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口（大小是最大化）。
参数：
rul：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
name：新窗口的名字，该名字给<a> 标记的target属性来用。
options：窗口的规格
width：新窗口的宽度
height：新窗口的高度
left：新窗口距离屏幕左边的距离
top：新窗口距离屏幕上边的距离
menubar：时候显示菜单栏，取值：yes、no
toolbar：是否显示工具栏
location：是否显示地址栏
status：是否显示状态栏
scrollbars：是否显示滚动条，不能省略s字母。

返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件：当网页加载完成，指<body> 标记的所有内容全部加载完成，才触发该事件（条件）。通过onload事件属性，去调用JS的函数。onload属性只有<body> 标记才有。

onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。

延时器方法——setTimeout()
setTime()
功能：设置一个延时器，时间一到，就执行JS代码一次。
语法：var timer=window.setTimeout(code,millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
示例：window.setTimeout(“close()”,2000)
window.setTimeout(init,2000);//传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值
返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。

clearTimeout()
功能：清除延时器id变量
语法：window.clearTimeout(timer)
参数：timer就是有setTimeout()设置的延时器的id变量。

//实例：简单计数器
//全局变量
var i = 0;
var timer;
function start2(){
    //获取网页中id=result的<input>元素对象
    var inputObj = document.getElementById("result");
    //<input>标记有什么属性，那么，对应的元素对象就有什么属性。
    inputObj.value = "该程序已经裕兴了"+i+"秒！";
    i++;
    //延时器
    //延时器要想实现重复执行，必须在函数中不断调用自己。
    //这么实现以后，延时器就可以模拟定时器的效果了。
    timer = window.setTimeout("start2()",1000);
}
function stop2(){
    window.clearTimeout(timer);
}
</script>
</head>
<body>
<input id="result" type="button" value="该程序已运行了0秒！"/><br>
<input type="button" value="开始" onclick="start2()"/>
<input type="button" value="停止" onclick="stop2()"/>

定时器方法
setInterva()
功能：设置一个定时器。定时器，重复不断的执行JS代码（周期性）。
语法：var timer = window.setInterval(code,millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
示例：window.setInterval(“init()”,2000)
示例：window.setInterval(init,2000);//传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值
返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。

clearInterval()
功能：清除定时器id变量
语法：window.clearInterval(timer)
参数：timer就是由setInterval()设置的定时器的id变量。

//实例：图片自动切换
<script>
//网页加载完成，去调用JS函数
window.onload = init;//函数传地址，不能带括号
//定义函数
function init(){
    //定时器：每隔1秒，调start2()函数一次
    //定时器总是调用其他函数，而延时器总是调用自己所在的函数。
    window.setInterval("start2()",1000);
}
//全局变量
var i = 1;
function start2(){
    //获取网页中的id=img01的图片元素对象
    var imgObj = document.getElementById("img01");
    //图片对象有src属性，那么imgObj对象也有src对象
    imgObj.src = "images/dd_scroll_"+i+".jpg";
    i++;
    //如果超过6，则i = 1。
    if(i>6)
    {
        i = 1;
    }
}
</script>
</head>
<body>
<img id="img01" src="images/dd_scroll_1.jpg" />
</body>
</html>

screen屏幕对象
Width：屏幕的宽度，只读属性
Height：屏幕的高度，只读属性
availWidth：屏幕的有效宽度，不含任务栏。只读属性。
availHeight：屏幕的有效高度，不含任务栏。只读属性。

navigator对象
appName：浏览器软件名称，主要用来判断用户使用的是什么核心的浏览器。
如果是IE浏览器，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器，返回值为：Netscape

appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台

Location地址栏对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href=”http://www.baidu.com”;
host：主机名
hostname：主机名
pathname：文件路径及文件名
search：查询字符串。

？号之后的部分是查询字符串
protocol：协议，如：http://、ftp://
hash：锚点名称。如：#top
reload([true])：刷新网页。true参数表示强制刷新

注意：所有的属性，重新赋值后，网页将自动刷新。

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

history对象
length：历史记录的个数
go(n)：同时可以实现“前进”和“后退”
i.history.go(0)：刷新网页
ii.history.go(-1)：后退
iii.history.go(1)：前进一步
iv.history.go(3)：前进三步
forward()：相当于浏览器的“前进”按钮
back()：相当于浏览器的“后退”按钮

DOM

DOM，Document Object Model，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
DOM官方定义：DOM可以使脚本动态的访问或操作网页的内容、网页的外观、网页的结构。

DOM的分类
核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法
HTML DOM：针对HTML文档提供的专用的属性方法
XML DOM：针对XML文档提供的专用的属性和方法
CSS DOM：提供了操作CSS的属性和方法
Event DOM：时间对象模型。如：onclidk、onload等。

HTML节点树
在HTML中，称为“标签”
在DOM中，称为“节点”
在JS中，称为“对象”

根节点：一个HTML文档中只有一个根，它就是HTML节点
子节点：某一个节点的下级节点
父节点：某一个节点的上级节点
兄弟节点：两个子节点同属于一个父节点

DOM中节点类型
document文档节点，代表整个网页，不代表任何HTML标记，但它是html节点的父节点。
element元素节点，指任何HTML标签。每一个HTML标签就称一个“元素节点”。它可以有文本节点和属性节点。
attribute属性节点。指HTML标签的属性。
text节点。节点树的最底节点。

核心DOM 中的公共的属性和方法
注：核心DOM中查找节点（标签），都是从根节点（html节点）开始的。
1、节点访问
nodeName：节点名称。
nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标签和CSS属性。
firstChild：第1个子节点。
lastChild：最后1个子节点。
childNodes：子节点列表，是一个数组。
parentNode：父节点。
查找<html>标签的方法：
document.firstChild
document.documentElement
查找<body> 标签的方法：
document.firstChild.lastChild
document.body

2、对节点的属性操作
setAttribute(name,value)：给某个节点添加一个属性。
getAttribute(name)：获取某个节点属性的值。
removeAttribute(name)：删除某个节点的属性。

window.onload = function(){
    //查找body节点
    var node_body = document.body;
    //查找img节点
    var imgObj = node_body.firstChild;
    //增加属性
    imgObj.setAttribute("src","images/01.jpg");
    imgObj.setAttribute("width","400");
    imgObj.setAttribute("border","2");
    imgObj.setAttribute("style","cursor:pointer;");
    //删除border属性
    imgObj.removeAttribute("border");
}
</script>
</head>
<body><img /></body>
</html>

3、节点的创建
document.createElement(tagName)：创建一个指定的HTML标签，一个节点
tagName：是指不带尖括号的HTML标记名称。
示例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
parentNode：父节点，必须存在。
childNode：子节点
示例：document.body.appendChild(imgObj)

parentNode.removeChild(childNode)：删除某个父节点下的子节点。
parentNode：父节点
childNode：要删除的子节点。
示例：document.body.removeChild(imgObj)

<script type="text/javascript">
//网页加载完成后
window.onload = function(){
    //创建一个<img>标记
    var imgObj = document.createElement("img");
    //增加属性
    imgObj.setAttribute("src","images/01.jpg");
    imgObj.setAttribute("width","400");
    //将创建的图片节点挂载到某个父节点下
    document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html>

//综合实例：随机显示小星星
<script type="text/javascript">
/*
（1）网页背景色为黑色
（2）创建图片节点，追加到<body>父节点
（3）图片随机大小
（4）图片随机定位坐标（x,y）
（5）定时器
（6）网页加载完成，开始星星
（7）星星显示范围更窗口的宽高一样。（0,window.innerWidth）
（8）点击星星，星星消失
*/
window.onload = function(){
    //更改网页背景颜色
    document.body.bgColor="#000";
    //定时器：1秒钟，显示一个星星
    window.setInterval("star()",1000);
}
//动画主函数
function star(){
    //创建图片节点
    var imgObj = document.createElement("img");
    //添加src属性
    imgObj.setAttribute("src","images/xingxing.gif");
    //添加width属性。getRandom()随机数函数
    var width=getRandom(15,85);
    imgObj.setAttribute("width",width);
    //添加style属性（行内样式）
    var x=getRandom(0,window.innerWidth);
    var y=getRandom(0,window.innerHeight);
    imgObj.setAttribut("style","position:absolute;left:"+x+"px;top:"+y+"px;");
    //添加onclick事件属性
    //this代表当前对象，this是一个对象
    //this是系统关键字，this只能在函数内使用
    imgObj.setAttribute("onclick","removeImg(this)");
    //将图片节点挂载到<body>父节点下
    document.body.appendChild(imgObj);
}
//函数：求随机数函数
function getRandom(min,max){
    //随机数
    var random=Math.random()*(max-min)+min;
    //向下取整
    random=Math.floor(random);
    //返回结果
    return random;
}
//函数：删除节点
fucntion removeImg(obj){
    document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>

HTML DOM
HTML DOM中提供了通过id直接找节点的方法，而不用从html根节点开始。
每一个HTML标签，都对应一个元素对象。
每一个HTML标签的属性，与对应的元素对象的属性一一对应

window.onload=function(){
    //获取网页中id=img01的图片对象
    var imgObj = document.getElementById("img01");
    //修改图片的属性值，图片标记的属性，元素对象也能用。
    imgObj.src="images/xingxing.gif";
    imgObj.width="400";
    imgObj.border=2;
    imgObj.style = "cursor:pointer";
    imgObj.style = "星星图片"；
    //核心DOM中的属性方法，元素对象都能用
    imgObj.parentNode.bgColor = "#ff0000";
}
</script>
</head>
<body>
<img id="img01" src="images/01.jpg" />

HTML DOM访问HTML元素的常用方法

1、getElementById()
功能：查找网页中指定id的元素对象。
语法：var obj = document.getElementById(id)
参数：id是指网页中标记的id属性的值。
返回值：返回一个元素对象。
举例：var imgObj = document.getElementById(“img01”)

2、getElementByTagName(tagName)
功能：查找指定的HTML标签，返回一个数组。
语法：var arrObj = parentNode.getElementByTagName(TagName)
参数：tagName是要查找的标签名称，不带尖括号。
返回值：返回一个数组，如果只有一个节点，也返回一个数组。
举例：var arrObj = ulObj.getElementByTagName(“li”)

window.onload = function(){
    //获取id = ulTag的网页对象
    var ulObj = document.getElementById("ulTag");
    //查找<ul>下的所有<li>标签
    var arrObj = ulObj.getElementByTagName("li");
    //给所有的<li>标签增加css效果
    for(var i=0;i<arrObj.length;i++){
        //给每个<li>标记加style属性
        arrObj[i].style = "color:bule;font-size:24px;";
    }
}
</script>
</head>
<body>
<ul id="ulTag">
    <li>html超文本标记语言</li>
    <li>css层叠样式表</li>
    <li>JavaScript客户端脚本</li>
    <li>WAMP:dindows+apache+mysql+php</li>
</ul>
</body>

元素对象的属性

tagName：标签名称，与核心DOM中nodeName一样
className：css类的样式
id：同HTML标记id属性一样
title：同HTML标记的title属性一样
style：同HTML标签的style属性一样
innerHTML：包含HTML标签中的所有的内容，包括HTML标签等

offsetWidth：元素对象的可见宽度，不带px单位
offsetHeight：元素对象的可见高度，不带px单位
scrollWidth：元素对象的总高度，包括滚动条中的内容，不带px单位
scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位
scrollTop：指内容向上滚动上去了多少距离（有滚动条是才有效），默认值为0
scrollLeft：指内容向左滚动过去了多少距离（有滚动条时才有效）
onscroll：当拖动滚动条时，调用JS函数

杰希默克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript自学笔记之学步阑珊

BOM和DOM介绍BOM，Browser Object Model，浏览器对象模型。 BOM主要提供了访问和操作浏览器各组件的方式。浏览器组件： window（浏览器窗口） location（地址栏） history（浏览历史） screen（显示器屏幕） navigator（浏览器软件） document（网页）DOM，Document Object Model，文档对
复制链接

扫一扫

专栏目录