JS进阶学习（2）

Emilia*

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

阅读量98

点赞数

分类专栏：笔记文章标签： 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;