JavaScript 的 BOM模型及 DOM模型相关对象的属性方法总结

最新推荐文章于 2021-11-21 17:57:53 发布

就是爱吃肉ro

最新推荐文章于 2021-11-21 17:57:53 发布

阅读量643

点赞数 1

分类专栏： # HTML / CSS / JavaScript # Java Web

本文链接：https://blog.csdn.net/weixin_44510468/article/details/104965385

版权

Java Web 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML / CSS / JavaScript

17 篇文章 1 订阅

订阅专栏

文章目录

Window
Document
Location
History
Navigator
Screen

这里总计下js 里的 Browser Object Model 浏览器对象模型里包括常用的几个对象

在这里插入图片描述

此坑先挖下周待填!

https://www.w3school.com.cn/jsref/dom_obj_window.asp

Window

这里只记录几个部分常用的

function	description
alert(“内容”)	警告框
prompt(“提示信息”, “输入框默认文本” )	带有提示内容以及用户输入的对话框
confirm(“提示信息”)	带有消息文本以及确认按钮和取消按钮的对话框, 返回值布尔值
-	-
setInterval( 函数, 毫秒 )	计时, 返回值为终止函数的参数
setTimeout( 函数 )	计时, 返回值为终止函数的参数
clearInterval(终止参数)
clearTimeout(终止参数)
-	-
moveBy()	可相对窗口的当前坐标把它移动指定的像素
moveTo()	把窗口的左上角移动到一个指定的坐标
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标
resizeBy()	按照指定的像素调整窗口的大小
resizeTo()	把窗口的大小调整到指定的宽度和高度
-	-
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口

Document

使用DOM模型无非就是: 文档.元素.节点与事件

w3school虽然比较乱, 但相关记录还是比较全的
https://www.w3school.com.cn/jsref/dom_obj_document.asp

DOM模型中八种选择元素的方法

四种get方法

document.getElementById( “idName” );

注意区别底下三中方法, 这个是单数element, 因为 id 是唯一的

document.getElementById("test")[i].value = "";

document.getElementsByName( “name” );

document.getElementsByName("txt")[i].value = "";

document.getElementsByTagName( “tagName” );

document.getElementsByTagName("input")[++pos].focus();

document.getElementsByClassName( “className” );

document.getElementsByClassName("box_register")[++pos].focus();

两种选择器方法

querySelector( “selector” );

若选择有多个结果则取第一个

document.querySelector("div.box").style = "red";

querySelectorAll( “selector” );

querrySelectorAll 是返回一个集合, 可以使用[]来访问每个节点

document.querySelectorAll("div.note, div.alert")[0].style = "";

两种属性

这两种属性还不太清楚, 似乎没有声明 <!DOCTYPE html> 结果不一样. 待填坑!

document.documentElement

document.body

DOM模型修改样式表的几种方法

通过属性

结点.style.color = “rgb(111,222,111)”;

document.getElementsBtClassName( "txt_1" )[0].style.color = "rgb(111,222,111)";

结点.style.cssText = “color:red;font-size:10px;”;

document.getElementsBtClassName( "txt_1" )[0].style.cssText = "color:red;font-size:10px;";

通过类名

结点.className = “newClassName”;

document.getElementsBtClassName( "txt_1" )[0].className = "newClassName";

结点.setAttribute(“class”, “newClassName” );

document.getElementsBtClassName( "txt_1" )[0].setAttribute( "class", "newTextClassName" );

结点.addClass(“样式类名”);

document.getElemntsByClassName("btn_base").addClass("btn_strong");
document.getElemntsByClassName("btn_base").removeClass("btn_strong");

通过setAttribute方法

结点.setAttribute( “href”, “./newCSSFile.css” );

document.getElementsByTagName( "link" )[0].setAttribute( "href", "./newCSSFile.css" );
document.getElementsByTagName( "link" )[0].getAttribute( "href" );
document.getElementsByTagName( "link" )[0].hasAttribute( "href" );
document.getElementsByTagName( "link" )[0].removeAttribute( "href" );

innerHTML / innerText / textContent 的区别

在这里插入图片描述

通过上图可以看出来, innerHTML / innerText / textContent三者显示的量是递减的.

Location

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）
host 设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前 URL 的协议
search	设置或返回从问号 (?) 开始的 URL（查询部分）

属性	描
assign( “url” )	加载新的文档
reload()	重新加载当前文档
replace( “url” )	用新的文档替换当前文档, 相当于location.href=“url”, 不可后退

History

| 属性 | 描述 |
| length | 返回浏览器历史列表中的 URL 数量。 |

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。