首页 > 代码库 > 细看JS中的BOM、DOM对象
细看JS中的BOM、DOM对象
DOM对象模型
【DOM树节点】
DOM节点分为三大类：元素节点，文本节点，属性节点：
文本节点，属性节点为元素节点的两个子节点；
通过getElment系列方法，可以去到元素节点；
【查看节点】
1.getElementById：通过id获取唯一的节点；多个同名ID只会取到第一个；
2.etElementByName：通过name取到一个数组，包含1到多个节点；
使用方式：通过循环取到每个节点，循环次数，从0开始<数组.length
[查看设置属性节点]
1.查看属性节点：getAttribute("属性名")
2.设置属性节点：setAttribute("属性名""属性值")*/
【js修改样式总结】
1、.className:为元素设置一个新的clas名字；
div1.className="class1";
2、.style：为元素设置新的样式，注意驼峰命名法；
div1.style.backgroundColor="red";
3、.style.cssText:为元素同时修改多个样式；
div1.style.cssText="width:100px;height:100px";
[查看节点]
1.tagname：获取节点的标签名；
2.innerHTML：设置或者获取节点内部的所有HTML代码；
3.innerText：设置或者获取节点内部的所有文字；
获取行内样式的方法：var div=document.getElementsByTagName("div")；
[获取层次节点的常用属性]：
1、.childNodes：（数组）获取元素的所有子节点（元素节点：子标签、文本节点）；
2、 .firstChild：获取元素的第一个子节点；
3、.lastChild:获取元素的最后一个子节点；
4、.ownerDocument:获取当前文档根节点，在html中，为doucument节点；
5、.parentNode：:获取当前文档父节点；
6、.previousSibling：获取当前节点的前一个兄弟节点
7、.nextSibling：获取当前节点的后一个兄弟节点；
8、.attributes：获取当前节点的所有属性节点；
【注意】：上述属性均会获得所有元素节点和文本节点，如果只需要元素节点，需要使用对应的Element属性，例如： .firstChild->.firstElementChild
[创建新增节点]：
1、.createElement("标签名")：创建一个新的节点，需要配合.setAttribute()方法设置新节点的相关属性；
2、.appendChild(节点名)：在某元素的最后追加一个新节点；
3、.insertBefore(新节点名，目标节点名)：将新节点插入到目标节点之前
4、克隆节点 .cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象；
传递参数可以是(true/false)；
true：为科隆当前节点和所有子节点；
false：之科隆当前节点，不克隆子节点（默认）；
[删除替换节点]
1、.removeChild(需删除节点)：从父容器中，删除指定节点;
2、.replaceChild(，新节点，被替换节点)：用新节点替换指定节点，如果新节点为页面中已有节点会删除后替换指定节点
function deleteUl1(){
//取到ul1
var ul1=document.getElementById("ul1");
//从ul的父容器删除ul1
if(ul1){
document.body.removeChild(ul1);
}else{
alert("ul1已经不存在");
}
}
【表格对象】
1、rows属性：返回表格中的所有行，数组;
2、insertRow(index)：在表格的第index+1行，插入新行;
3.deleteRow():删除表格的第index+1行;
【表格行对象】：
1、cells属性：返回表格中的所有行，数组;
2、rowIndex：返回当前行，在表格中的索引顺序，从0开始;
3、indexCell(index):在表格的第index+1处插入一个<td>;
4、deleteCell(index):删除当前行的第index+1个<td>;
【表格的单元格对象】：
1.cellIndex属性：返回单元格在该行的索引顺序，从0开始;
2、innerHTML属性：返回或设置当前单元格中的HTML代码;
3、align属性：设置当前单元格的水平对齐方式;
4、claaName属性：设置单元格的class属性;
BOM对象模型
【screen对象】
console.log(screen);
console.log(screen.width); //屏幕宽度；
console.log(screen.height); //屏幕高度；
console.log(screen.availWidth);//屏幕可用宽度；
console.log(screen.availHeight);//屏幕可用高度=屏幕高度-底部任务栏高度；
location对象
location完整的URL路径：
1.协议：//主机名（IP地址）：端口号(默认80端口)/文件路径？传递参数(参数名=参数值name1=value1&name2=value2)#锚点*/
console.log(location.href);//完整路径
console.log(location.protocol);//使用的协议http：https:ftp:file:mailto:
console.log(location.pathname);//文件路径
console.log(location.port);//端口号
console.log(location.search);//从？开始的部分
console.log(location.hostname);//主机名（IP地址）
console.log(location.host);//主机名+端口号
console.log(location.hash);//从#开始的锚点
window.location="http://www.baidu.com";//使用JS跳转页面
function locationAssign(){
location.assign("http://www.baidu.com");
加载新文档，加载之后，可以回退；
}
function locationReplace(){
location.replace("http://www.baidu.com");
使用新的文档，替换当前文档，替换之后不能回退；
}
function locationReload(){
重新加载当前页面
reload(true)：从服务器重新加载页面
reload()：在本地刷新当前页面*/
location.reload(true);
}
console.log(history.length);
浏览历史列表的个数
history.forward();前进到前一个页面；
history.back();前进到后一个页面；
history.go(-1);跳转到任意页面：前一个页面为第一个，后一个页面为-1个
Navigator 了解
console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台
navigator.plugins。返回一个数组，检测浏览器安装的所有插件
>>>主要的属性：
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件的个数
name：插件名
console.log(navigator.plugins);//检查浏览器安装的插件信息
navigator.mimeTypes 浏览器插件，所支持的文件类型
>>>主要属性
description：MIME类型描述
enabledPlugin：支持此类型的浏览器插件
suffixes：此类型可能的后缀名
type：MIME类型的写法，例如： image/x-icon text/css
console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型
【重点】window对象的常用方法：
>>>window对象中的所有方法，均可以省略前面的window，比如close（）；
1.prompt：弹窗接受用户输入；
2.alert：弹窗警告；
3.confirm：带有确认/取消按钮的提示框；
4.close：关闭窗口;
5.open:重新打开一个窗口，传入参数URL/窗口名称/窗口特征;
6.setTimeout:设置延时执行，只会执行一次；
7.setInterval：设置定时器，循环每个N毫秒执行一次；
两个参数：需要执行的function/毫秒
8.clearTimeout：清除延时；
9.clearInterval：清除定时器
传入参数：调用setInterval时返回一个ID，通过变量接受ID，传入clearInterval；
细看JS中的BOM、DOM对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。