第二部分BOMDOM

最新推荐文章于 2024-08-09 10:42:44 发布

Lonely Feather

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量83

点赞数

分类专栏：前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_47469471/article/details/127648845

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BOM

1 window

属性
	name  获取或设置窗口的名字
	innerWidth   获取视口的宽度（只读）
	innerHeight  获取视口的高度（只读）
	document
	history
	location
	screen
	navigator


方法
	alert()  警告框
	confirm()  确认框
	prompt()   输入框
	open()   打开新窗口
	close()  关闭窗口（只有open方法打开的窗口才能使用 close 关闭）
	print()  调用打印程序
	scrollTo()   页面滚动到指定位置
	scrollBy()   让页面滚动多少
	setInterval() 设置多次定时
	clearInterval()  取消定时
	setTimeout()  设置单次定时
	clearTimeout() 取消单次定时

2 location

属性：
	href	完整的url  
	protocol  协议
	host      主机名+端口
	hostname  主机名
	port      端口
	search
	hash
	
方法：
	reload()  刷新页面
	assign()  跳转页面   新旧网页都在历史记录中
	replace()  跳转页眉； 替换，原先的网页不在历史记录中。

3 history

属性
	length  本窗口浏览记录的个数
	
方法：
	back()  后退一步
	forward() 前进一步
	go(n)  前进或后退 n是正数前进，是负数后退，n步

4 screen

属性：
	width 屏幕的宽度
	height 屏幕的高度

5 navigator

属性：
	userAgent  获取浏览器相关的信息（用户代理字符串）

DOM 概述

文档对象模型 document object moel

2 节点 Node

JS 认为HTML文档中的一切都是节点。

HTML 中有五种类型的节点：

① document 文档节点

② elementNote 元素节点

③ attributeNode 属性节点

④ textNote 文本节点

⑤ commentNote 注释节点

所有的节点都是对象，每个节点都有三个属性：

nodeName 返回节点名称 document:#document，元素节点：标签名，属性节点：属性名, 文本节点：#text, 注释节点：#coment
nodeValue 返回节点的值 document:null, 元素节点:null, 属性节点:属性的值，文本节点：文本内容，注释节点：注释内容
nodeType 返回用数字表示的节点的类型。 document：9，元素节点：1，属性节点：2，文本节点：3，注释节点：8

3 获取元素

3.1 根据 id 获取

document.getElementById('id名');

3.2 根据标签名获取

document.getElementsByTagName('标签名');  // 从整个文档中查找  返回的HTMLCollection
elment,getElementsByTagName('标签名');    // 从 element 元素的后代中找  返回的HTMLCollection

3.3 根据类名获取

document.getElementsByClassName('类名');  // 从整个文档中查找  返回的HTMLCollection
elment,getElementsByClassName('类名');    // 从 element 元素的后代中找  返回的HTMLCollection

需要 IE9 以上浏览器支持！

3.4 根据 name 属性的值获取

document.getElementsByName('值');  // 返回的是 NodeList

3.5 使用选择器获取元素（推荐）

document.querySelector('选择器');   // 获取第一个满足选择器条件的元素，返回的是元素对象。 从整个文档中获取

document.querySelectorAll('选择器');  // 获取所有满足选择器条件的元素，返回的是 NodeList 对象。从整个文档中获取 返回的是 NodeList

element.querySelector('选择器');  // 从element的后代中获取

element.querySelectorAll('选择器');  // 从 element 的后代中获取 返回的是 NodeList

需要IE9+！

3.6 document.all 获取所有的元素

document.all;  // 返回 HTMLCollection

利用 document.all 可以判断 IE浏览器还是非 IE浏览器

if (document.all) {
document.write(‘这是IE浏览器！’);
} else {
document.write(‘这是非IE浏览器’);
}

4 文档结构

4.1 作为节点树

parentNode  获取父节点；   只有 document节点和元素节点才有资格作为父节点
firstChild  第一个子节点
lastChild   最后一个子节点
childNodes  所有的子节点 返回 NodeList 对象；可以通过制定索引获取任意的子节点。
nextSibling  获取后面紧邻的兄弟节点
previousSibling 获取前面紧邻的兄弟节点

4.2 作为元素树

parentElement  获取父元素；  除了html元素，其他元素的parentNode等于parentElement；html 元素没有父元素
firstElementChild  获取第一个子元素   IE9+
lastElementChild  获取最后一个子元素  IE9+
children   获取所有的子元素
childElementCount  获取子元素的数量
nextElementSibling   获取紧邻在后面的兄弟元素   IE9+
previousElementSibling  获取紧邻在前面的兄弟元素   IE9+
ownerDocument   获取元素所属的文档document

5 属性操作

5.1 内置属性

element.属性名; // 可以获取也可以设置

5.2 自定义属性

element.getAttribute(attrName);  // 获取属性的值（HTML代码中标签上写的属性， 通常用于获取自定有属性）

element.setAttribute(attrName, value);  // 设置属性的值（在HTML代码中标签山的属性值进行修改， 通常用于设置自定义属性），如果属性不存在就添加该属性

5.3 `data-` 开头的自定义属性

element.dataset.属性名；  // 读写

如果html中 data-name; js 读写操作 element.dataset.name；

如果 html 中 data-user-password; js 读写操作 element.dataset.userPassword。

作业

1. 实现随机抽奖的开始关闭按钮
2. 全选全不选改进