BOM 操作
一, 什么是 BOM
BOM(Browser Object Model)即浏览器对象模型.
BOM 提供了独立于内容 而与浏览器窗口进行交互的对象;
BOM 由一系列相关的对象构成, 并且每个对象都提供了很多方法与属性;
二, BOM 常用的对象
Screen 对象: 尺寸
- window.screen;
- screen.width
- screen.height
- screen.availHeight// 可用高度 = 可用高度 - 底部任务栏高度
- screen.availWidth// 可用宽度
Location 对象: 地址
- console.log(location)
- location.href// 完整的 URL 地址
- location.protocol// 协议名
- location.hostname// 主机名
- location.port// 端口名
- location.host// 主机名 + 端口名
- location.pathname// 文件路径
- location.search// 从? 开始的部分
- location.hash// 从 #开始的部分
History 对象: 历史
- history.length;// 用于记录当前页面跳转的历史记录的个数
- history.forward();// 点击去前一页, 相当于浏览器的前进按钮
- history.back();// 点击去后一页, 相当于浏览器的后退按钮
history.go(): 表示跳转到浏览器的任意界面
- history.go(-1);// 后一页, 相当于 history.forward()
- history.go(0);// 当前页, 表示刷新当前页面
- history.go(1);// 前一页, 相当于 history.back()
Navigator 对象:(了解)返回关于浏览器的各种系统信息.
Windows 常用的方法
Window 对象的常用方法:
1.window.alert(): 弹窗输出
2.window.prompt(): 弹窗输入
3.window.confirm(): 带确认, 取消的提示框. 分别返回 true,false.
4.window.close(): 关闭浏览器窗口.
5.window.open(): 打开一个新窗口, 参数 1: 地址; 参数 2: 新窗口的名字; 参数 3: 新窗口的各种配置属性;
6.window.setTimeout(): 延时器, 表示延时多少 ms 后执行一个函数. 参数 1: 函数名或者匿名函数; 参数 2: 毫米; 参数 3: 传给页面的参数
7.window.setInterval(): 定时器, 每隔多少毫秒执行一遍函数, 其他用于与 setTimeout 完全相同.
8.clearInterval(),clearImmediate(): 分别清楚定时器, 延时器. 声明定时器可以接受一个 ID, 传给 clearInterval().
DOM 操作
1.DOM 节点数
1.DOM 节点分为三类: 元素节点(标签节点), 属性节点, 文本节点.
属性节点和文本节点都属于元素节点的子节点, 因此操作时, 需要先选中元素节点, 再修改属性和文本.
2. 查看元素节点
1, 使用 getElement 系列方法.
- window.onload = function(){
- var lis = document.getElementById("first");
- var lis1 = document.getElementsByClassName("cls");
- var lis2 = document.getElementsByName("na");
- var lis3 = document.getElementsByTagName("li");}
2, 注意事项:
(1)ID 不能重名, 如果 ID 重复, 只能取到第一个.
(2)获取元素节点时, 必须等到 DOM 树加载完成后才能获取.
两种方式:将 JS 写在文档之后.如图, 写在 window.onload 中.
(3)通过 getElements 系列取到的为数组格式, 操作时必须取到其中的每一个元素, 才能进行操作, 而不能直接对数组进行操作.
(4)这一系列方法, 也可以先选中 DOM 节点, 从选择的 DOM 节点中在选择需要的节点.
3, 通过 querySelector()系列方法
(1)传入一个选择器名称, 返回找到的第一个元素, 通常用于查找 ID
(2)传入一个选择器名称, 找到所有元素, 无论找到几个, 都返回一个数组格式的元素.
- document.querySelector("#first");
- document.querySelectorAll("#div li");
3. 设置属性节点
1. 查看属性节点: getAttribute("属性名")
2. 设置属性节点: setAttribute("属性名","属性值")
3. 删除属性节点: removeAttribute("属性名");
4. 注意事项: setAttribute()在老版本的 IE 中会出现兼容性问题, 可以使用点符号 (.) 代替, 设置属性.
[JS 修改 CSS 的多种方式]
(1)使用 setAttribute()设置 class 和 style
(2)使用 .className 添加一个 class 选择器, 修改 style
(3)使用. style. 样式 直接修改单个样式, 注意样式名必须使用驼峰命名法.
(4)使用. style. 或 .style.cssText 直接修改样式.
- document.getElementById("first").setAttribute("class","class1");
- document.getElementById("first").setAttribute("style","color:red;");
- document.getElementById("first").getAttribute("style");// 查看 CSS
- document.getElementById("first").style.fontSize = "20px";
- document.getElementById("first").removeAttribute("style");// 移除 CSS
- document.getElementById("first").style = "font-size: 20px";//IE 不兼容
- document.getElementById("first").style.cssText = "font-size: 20px";
4. 查看设置文本节点
(1)innerhtml : 取到或者设置一个节点中的 HTML 代码.
(2)innerText: 取到或者设置一个节点中的文本, 不能设置 HTML 代码.
- var s1 = document.getElementById("first").innerHTML;
- document.getElementById("first").innerHTML = "<a>yiyiyi</a>";
- var s2 = document.getElementById("first").innerText;
- document.getElementById("first").innerText = "teset";
JS 中的层次节点
1. 基本节点
1.childNodes: 获取当前节点的所有子节点(元素节点和文本节点)
2.children: 获取当前节点的所有元素子节点(不包含文本节点)
3.parentNode: 获取当前元素的父节点.
4.firstChild: 获取第一个子节点, 包括回车符等字符节点
5.lastChild: 获取最后一个子节点
6.firstElementChild: 获取第一个元素节点, 不含回车符等字符节点.
7.lastElementChild: 获取最后一个元素节点, 不含回车符等字符节点.
8.previousSibling: 获取当前节点的前一个兄弟节点, 包括文本节点
9.previousElementSibling: 获取当前节点的前一个元素兄弟节点, 不包括文本节点.
10.nextSibling: 取当前节点的后一个兄弟节点, 包括文本节点
11.nextElementSibling: 获取当前节点的后一个元素兄弟节点, 不包括文本节点.
12.attributes: 获取当前节点的属性节点, 返回数组模式.
2. 创建添加节点
1.document.createElement("标签名"): 创建一个新节点.
需要配合 setAttribute()为新节点设置属性.
- var img = document.createElement("img");
- img.setAttribute("src","../../01-HTML 基本标签 / img/Female.gif_temp.bmp");
2. 父节点. insertBefore(新节点, 目标节点): 在父节点中, 将新节点插入到目标节点之前.
父节点. appendChild(新节点): 在父节点的最后插入新节点.
原节点. cloneNode(true): 克隆一个节点.
传入 true 表示克隆原节点及原节点的所有子节点
传入 false 表示只克隆原节点, 不可隆其它子节点.
- window.onload = function(){
- var ul = document.getElementById("ul1");
- // 插入目标之前
- document.getElementsByTagName("div")[0].insertBefore(img,ul);
- // 插入到最后
- document.getElementsByTagName("div")[0].appendChild(img);
- // 克隆
- var newUL = ul.cloneNode(true);
- document.getElementsByTagName("div")[0].appendChild(newUL);
- }
3. 删除替换节点
父节点. removeChiled(子节点): 从父节点中, 删除指定子节点.
父节点. replaceChild(新节点, 老节点): 从父节点中, 用新节点替换老节点.
- document.getElementsByTagName("div")[0].removeChild(newUL);
- document.getElementsByTagName("div")[0].replaceChild(img,ul);
JS 对表格的操作:
HTML 表格中的对象有三种:
1. 表格对象: var table = document.getElementById("table");
2. 行对象: table.rows[0]
3. 单元格对象: table.rows[0].cells[0]
表格对象中的属性和方法
1.rows 属性: 返回当前表格的所有行, 为数组格式.
2.insertRow(index): 在表格的 index 行插入一个新行, 返回新产生的对象.
3.deleteRow(index): 删除表格的第 index 行.
行对象的属性和方法
1.cells 属性: 返回当前行中的所有单元格对象, 为数组格式.
2.rowIndex 属性: 返回当前行在表格中的下标.
3.insertCell(index)属性: 表示在行中的 index 位置, 插入一个新单元格, 返回新产生的单元格对象.
4.deleteCell(index)属性: 表示删除本行中的第 index 个单元格.
单元格对象的属性和方法
1.cellIndex 属性: 返回当前单元格在本行中的下标
2.innerHTML/innerText/className/style.color 等都可以使用.
来源: https://www.cnblogs.com/JiangLai/p/8969401.html