JS进阶学习（2）

Emilia*

已于 2022-05-30 20:41:24 修改

阅读量72

点赞数

分类专栏：笔记文章标签： javascript 学习开发语言

于 2022-05-29 00:37:58 首次发布

本文链接：https://blog.csdn.net/m0_62461358/article/details/125023943

版权

笔记专栏收录该内容

8 篇文章 3 订阅

订阅专栏

七、window对象

1.JavaScript计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

计时器setInterval
语法：setInterval(代码，交互时间）示例如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>

取消计时器clearInterval
计时器setTimeout
取消计时器clearTimeout

2.History对象

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

语法：

window.history.[属性|方法]

返回前一个浏览的对象

window.history.back()//back()相当于go(-1)

返回下一个浏览的页面

forward（）相当于go（1）相当于点击前进按钮

返回浏览历史中的其他页面

go（）方法，根据当前所处的页面，加载history列表中的某个具体的页面

语法：window.history.go(number)

number=-2：返回当前页面之前浏览的第二个历史页面

3.Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

location对象属性图示：

location对象属性：

location对象方法：

4.Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

*userAgent:返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法：

navigator.userAgent

5.screen对象

window.screen.属性

八、DOM对象，控制HTML元素

1.认识DOM

元素节点/标签如：<html>、<body>
文本节点：向用户展示的内容
属性节点：元素属性，如<a>标签的链接属性href

节点属性：

遍历节点树：

DOM操作：

2.getElementsByName()方法

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

3.getElementsByTagName（）方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

*区别

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

4.getAttribute()方法

通过元素节点的属性名称来获取属性的值

elementNode.getAttribute(name)

5.setAttribute()方法

增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

elementNode.setAttribute(name,value)

6.节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

7.访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

8.访问子节点的第一和最后项

9.访问父节点parentNode

*父节点只能有一个

10.访问兄弟节点

11.插入节点appendChild()

语法：appendChild(newnode)

newnode：指定追加的节点。

我们来看看，div标签内创建一个新的 P 标签，代码如下:

12.插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

13.删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

nodeObject.removeChild(node)；
//node ：必需，指定需要删除的节点。

运行结果：

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:

14.替换元素节点replaceChild()

node.replaceChild (newnode,oldnew )

15.创建元素节点createElement

document.createElement(tagName)

16.创建文本节点createTextNode

17.浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度

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

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

18.网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度

19.网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight + 滚动条 + 边框。

20.网页卷去的距离与偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

*内容大部分来自自己学习网站原笔记如有侵权请与我取得联系哦~

Emilia*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS进阶学习（2）

七、window对象1.JavaScript计时器在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。计时器类型：一次性计时器：仅在指定的延迟时间之后触发一次。间隔性触发计时器：每隔一定的时间间隔就触发一次。计时器方法：计时器setInterval语法：setInterval(代码，交互时间）示例如下：<!DOCTYPE HTML><html><head><meta http-equiv=..
复制链接

扫一扫