特殊对象

Location对象

Location对象是window对象的属性 Location对象的属性如下
hash 返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname 返回URL的主机名
href 返回完整的URL pathname 返回URL的路径名 port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议 search 返回一个URL的查询部分
Location对象的常用方法
assign() 载入一个新的文档
reload() 重新载入当前文档
replace() 用新的文档替换现有文档

Location对象使用最多的就是replace() 替换文档的的方法。

function f() {
  window.location.replace('https:- www.baidu.com');
}

Navigator对象

Navigator对象包含有关浏览器的有关信息，属性如下
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本
cookieEnabled 指明浏览器是否允许使用cookie
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent头部的值
Navigator对象的方法如下
javaEnabled() 指定是否在浏览器中启用Java
traitEnabled() 规定浏览器是否启用数据污点

document.write('浏览器代号' + window.navigator.appCodeName + '<br\>');
document.write('浏览器名称' + window.navigator.appName + '<br\>');
document.write('浏览器版本' + window.navigator.appVersion + '<br\>');

Window对象

window对象表示浏览器中打开的窗体，若文档中包含框架（frame标签或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个文档创建一个额外的window对象

window对象属性

closed 返回窗口是否已关闭
defaultStatus 设置或返回窗口状态栏的默认文本
document 对Document对象的只读引用
frames 返回窗口中所有命名的框架该集合是Window对象的数组，每个Window对象在窗口中都有一个框架
history 对History对象的只读引用
innerHeight 返回窗口的文档显示区的高度
innerWeight 返回窗口的文档显示区的宽度
length 设置或返回窗口的框架数量
location 用于设置窗口或框架的Location对象
name 用于返回窗口的名称
navigator 对Navigator的只读引用
opener 返回对创建此窗口的引用
outerHeight 返回窗口的外部高度，包含工具条和滚动条
outerWeight 返回窗口的外部宽度，包含工具条和滚动条
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的X位置
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的Y位置
parent 返回父窗口
screen 对Screen对象的只读引用
screenLeft 返回相对于屏幕窗口的X坐标
screenTop 返回相对于屏幕窗口的Y坐标
screenX 返回相对于屏幕窗口的X坐标
screenY 返回相对于屏幕窗口的Y坐标
self 返回对当前窗口的引用，等价于window属性
status 设置窗口状态栏的文本
top 返回最顶层的父窗口

通过window的frameElement属性可以获取当前窗口所在的框架对象。

let documentObj = window.frameElement;

parent属性返回当前窗口的父窗口 top获取各子窗口的最顶层对象

window对象的其他方法

alert() 显示有一段消息和一个确认按钮的警告框
blur() 把键盘焦点从顶层窗口移开
clearInterval() 取消由setInterval()设置的timeout
clearTimeout() 取消由setTimeout()设置的timeout
close() 关闭浏览器窗口
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
createPopup() 创建一个Pop-up窗口
focus() 把键盘焦点给予一个窗口
moveBy() 可相对窗口的当前坐标把它移动指定的像素
moveTo() 把窗口的左上角移动到某一个坐标
open() 打开一个浏览器窗口或查找一个已经命名的窗口
print() 打印当前窗口的内容
prompt() 显示可提示用户输入的对话框
resizeBy() 按照指定的像素调整窗口的大小
resizeTo() 把窗口的大小调整到指定的宽度和高度
scrollBy() 按照指定的像素值滚动内容
scrollTo() 把内容滚动到指定的坐标
setInterval() 按照指定的周期调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或表达式

对话框

alert() 生成一个带有指定信息的警告对话框
confirm(text) 生成一个通知对话框，该对话框内有一段文字，并且有确认和取消按钮当点击确认按钮时此按钮返回true
prompt(text,defaultText) 生成一个具有提示信息和输入框的对话框 defaultText是在输入框内的默认文本若点击取消该方法返回null 否则返回输入框内的字符串

打开新窗口

window.open(URL,name,specs,replace) 用于打开一个新的浏览器窗口或查找一个已命名的窗口
URL：可选，打开指定的页面的URL。若没指定则打开空白窗口
name：可选，指定target属性或窗口的名称，可选的值如下
_blank 加载到一个新的窗口，默认值 _parent 加载到父框架 _self 替换当前页面 _top 替换任何可加载的框架集 name 窗口名称
specs：可选，一个逗号分隔的项目列表，支持的值如下
height=pixels 窗口的高度 width=pixels 窗口的宽度 left=pixels 该窗口的左侧位置 menubar=yes|no|1|0 是否显示菜单栏
location=yes|no|1|0 是否显示该地址字段 resizable=yes|no|1|0 是否可调整大小
scrollbars=yes|no|1|0 是否显示滚动条 status=yes|no|1|0 是否添加一个状态栏
titlebar=yes|no|1|0 是否显示标题栏 toolbar=yes|no|1|0 是否显示浏览器工具栏
replace：装载到窗口的URL是在浏览历史中创造一个新条目，还是替换浏览历史中的当前条目

DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

通过可编程的文档模型，JS有足够的能力创建动态的HTML，可以改变文档中所有的HTML元素，CSS样式。

下面列举一些基本的DOM方法

直接引用节点 document.getElementById('id1'); - 此方法在文档中通过id查找元素，返回值只有一个
document.getElementsByTagName('id1'); - 此方法通过标记名称寻找元素，返回数组

function start1(){
    //获取所有的body元素列表（此处只有一个）
    let documentElements = document.getElementsByTagName('body');
    //body元素是这个列表的第一个元素
    let body = documentElements.item(0);
    //获取body的子元素中所有的p元素
    let pElements = body.getElementsByTagName('p');
    //获得第二个p元素
	let p = pElements.item(1);
}

间接引用节点

element.parentNode属性：引用父节点
element.childNodes属性：返回所有子节点的数组
element.nextSibling属性和element.nextPreviousSibling属性：对下一个兄弟节点和对上一个兄弟节点的引用

获取节点信息

nodeName属性：获得节点名称
nodeType属性：获得节点类型
nodeValue属性：获得节点的值
hasChildNodes()：判断是否有子节点
tagName属性：获得标记名称

处理节点信息

除了通过“元素节点.属性名称”的方式访问外，还可以通过setAttribute()和getAttribute()方法设置和获得节点属性
elementNode.setAttribute(attributeName,value)：设置元素节点的属性
elementNode.getAttribute(attributeName)：获取属性值

处理文本节点

innerHTML属性：设置或返回节点开始或结束标签之间的HTML
innerText属性：设置或返回节点开始和结束标签之间的文本，不包括HTML标签

改变文档层次结构

document.createElement()方法：创建元素节点
document.createTextNode()方法：创建文本节点
appendChild(childElement)方法：添加子节点
insertBefore(newNode,refNode)：插入子节点，第一个参数代表插入的节点，第二个参数代表将节点插入它之前
replaceChild(newNode,oldNode)：取代子节点，oldNode必须是parentNode的子节点
cloneNode(includeChildren)：复制节点。includeChildren代表是否复制子节点
removeChild(childNode)：删除子节点

DOM元素节点

在DOM模型中有三个节点，它们分别是元素节点、文本节点和属性节点。

元素节点：即标记节点如li ol等

function getNodeProperty1() {
    let node = document.getElementById('myList');
    alert('ELEMENT_NODE：' + node.nodeType);  //1，ELEMENT_NODE
    alert('元素标记名：' + node.nodeName);  //元素标记名
    alert('节点值：' + node.nodeValue); //null
}

文本节点即文字部分

function getNodeProperty2() {
    let node = document.getElementsByTagName('li')[0].firstChild;
    alert('TEXT_NODE：' + node.nodeType);  //3，TEXT_NODE
    alert('节点名称：' + node.nodeName);  //#text
    alert('文本内容：' + node.nodeValue); //文本内容
}

属性节点即标签的属性

function getNodeProperty3() {
    let node = document.getElementsByTagName('li')[0].getAttributeNode('name');
    //getAttributeNode(nodeName)获取属性节点
    alert('ATTRIBUTE_NODE：' + node.nodeType);  //2，ATTRIBUTE_NODE
    alert('属性名：' + node.nodeName);  //属性名
    alert('属性值：' + node.nodeValue); //属性值
}

文档对象

文档的属性和方法有很多，下面给出一些具体实例。

title存储的是文档的标题，可以通过重新赋值实现改变文档标题。

function changeTitle() {
    document.title = '改变了文档标题';
}

获取文档信息

function getMsg() {
    alert(
        '当前文档的域名是：' + document.domain + '\n' +
        '当前文档的状态：' + document.readyState + '\n' +
        '当前文档有关的所有cookie：' + document.cookie + '\n' +
        '当前文档的URL：' + document.URL
    );
}

颜色属性

Document对象提供了alinkColor、bgColor、fgColor等几个元素属性
alinkColor可以设置活动链接的颜色
bgColor可以设置背景颜色
fgColor可以设置前景颜色
linkColor可以设置未访问链接颜色
vlinkColor可以设置已访问链接的颜色

输出数据

使用document.write()输出数据，使用document.writeln()输出数据并换行
使用document.open()和document.close()可以在打开的新窗口中输出数据，其中document.open()用于打开文档输出流，用于接收来自document.write()和document.writeln()方法的输出，并使用document.close()关闭输出流。

function createDoc() {
let w = window.open();
w.document.open();
w.document.write('在新窗口中输出数据');
w.document.close();
}

DOM对象属性

document对象提供了可以操作网页文本的属性和方法，前面的document.write()方法就是document对象提供的。

document对象的常用方法和属性如下：

属性：

document.alinkColor 链接文字的颜色，对应<body>标签的alink属性
document.vlinkColor 表示已访问的链接的颜色，对应于<body>标签的vlink属性
document.linkColor 未被访问的链接文字的颜色，对应于<body>标签的link属性
document.bgColor 文档的背景色，对应于<body>标签的bgcolor属性
document.fgcolor 文档的文本颜色（不包含超链接的颜色），对应于<body>标记的text属性
document.fileSize 当前文件的大小
document.fileModifiedDate 文档最后修改的日期
document.fileCreatedDate 文档的创建日期
document.activeElement 返回当前的焦点元素
document.adoptNode(node) 从另外一个文档返回adapted节点到当前文档
document.anchors 返回对当前文档中所有anchor对象的引用
document.applets 返回当前文档中所有applet对象的引用
document.baseURI 返回文档的绝对基础URI
document.body 返回文档的body元素、
document.cookie 设置或返回当前文档的所有有关cookie
document.doctype 返回与文档有关的文档声明
document.documentElement 返回文档的根节点
document.documentMode 返回用于通过浏览器渲染文档的模式
document.documentURI 设置或返回文档的位置
document.domain 返回当前文档的域名
document.domConfig 返回normalizeDocument()被调用时使用的配置
document.embeds 返回文档中所有嵌入的内容的集合
document.forms 返回文档中所有form对象的引用
document.images 返回对文档中所有image对象的引用
document.implementation 返回处理该文档的DOMImplementation的对象
document.inputEncoding 返回用于浏览器的编码形式
document.lastModified 返回文档最后修改的日期和时间
document.links 返回对文档中所有area和link的引用
document.readyState 返回文档状态（载入中...）
document.referer 返沪载入当前文档的URL
document.scripts 返回界面中所有脚本的集合
document.strictErrorChecking 设置或返回是否进行强制错误检查
document.title 返回当前文档的标题
document.URL 返回文档完整的URL

下面对JS的document一些属性做特别介绍

links属性用于返回当前文档的所有超链接数组，语法如下：

document.links[1].innerHTML;
document.write('文档的第一个超链接文本：' + document.links[1].innerHTML + '<br\>');

lastModified属性用于返回文档最后修改的日期和时间，语法如下：

document.lastModified;
document.write('文档最后被编辑的时间：' + document.lastModified + '<br\>');

forms属性该属性返回所有的表单对象语法：

document.forms;
document.write('文档中表单的数量' + document.forms.length + '<br\>')

DOM方法

document.addEventListener() 向文档添加句柄
document.close() 关闭用document.open()打开的输出流，并显示选定的数据
document.open() 打开一个流，以收集来自任何document.write()或document.writeln()方法
document.createAttribute() 创建一个属性节点
document.createComment() 创建注释节点
document.createDocumentFragment() 创建空的DocumentFragment节点，并返回此对象
document.createTextNode() 创建文本节点
document.createElement() 创建元素节点
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为NodeList对象
document.getElementById() 返回对拥有指定id的第一个对象的引用
document.getElementsByName() 返回带有指定名称的对象集合
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.importNode() 把一个节点从另一个文档复制到该文档以应用
document.normalize() 删除空文本节点，并连接相邻节点
document.normalizeDocument() 删除空文本节点，并连接相邻节点的文档
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll() 返回文档中匹配的CSS选择器的所有元素节点列表
document.removeEventListener() 移除由document.addEventListener()方法添加的
document.renameNode() 重命名元素或属性节点
document.write() 向文档写HTML表达式或JS代码
document.writeln() 向文档写HTML表达式或JS代码并换行

下面详细介绍这些方法：

createElement() 它可以动态添加一个HTML标记

function addInput() {
    let input = document.createElement('input');
    input.type = 'text';
    input.name = 'txt';
    input.value = '动态添加的文本框';
    document.body.appendChild(input);
}

getElementById() 使用此方法可以获取指定元素并修改其内容

function modify() {
    document.getElementById('input').value = '修改后的文本';
}

addEventListener() 向文档中添加句柄如我们为页面点击添加一个弹出对话框的功能

document.addEventListener('click', function () {
    alert('点击了文档')
});

使用DOM改变元素CSS样式

使用DOM可以改变CSS样式，语法是document.getElementById(id).style.property = newStyle。

function changeCSS() {
    document.getElementById('myButton').style.fontFamily = '楷体';
}

“三位一体”的页面： //网页的内容可以分为三层：结构层、表现层和行为层。

结构层：由HTML和XML等标记语言负责创建，元素（标签）对页面各个部分的含义做出描述，例如<ul>表示创建无序列表
表现层：由CSS创建，即如何显示这些内容，如显示蓝色、宋体字体显示文字。
行为层：负责内容应该如何对这些事件做出反应，由JS和DOM完成。

使用className属性可以修改节点的CSS样式。

function changeClassName() {
    document.getElementsByClassName('myStyle1')[0].className = 'myStyle2';
}

通过className新增CSS样式，语法是node.className += newStyle;。

function addCSS() {
    document.getElementById('myButton2').className += ' myStyle3';
}

还有一种常常改变元素样式的方法，就是快速修改元素的class列表。JavaScript为DOM对象提供了一个ClassList属性，它是一个列表，可以通过对这个列表进行操作来改变元素的class属性的值，进而改变元素的属性。

const object = document.querySelector("#object");
object.classList.add("class1");  //添加一个类名
object.classList.add("class2", "class3");  //添加多个类名
object.classList.remove("class2"); //移除某个类名
object.classList.toggle("class1", flag);  //若flag为真则添加/保留class1，否则删除

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)