js学习 六、浏览器记录

六、浏览器

6.1、浏览器对象

windows

充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

navigator

navigator对象表示浏览器的信息，最常用的属性包括：

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

不建议使用以上的属性进行判断和编写代码 因为是用户可以更改的

screen

screen对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

location对象表示当前页面的URL信息。

location
http://localhost:63342/JavaScript/lesson01/one.html?_ijt=h4md6ke1rnp906690ha6hvbfjr#TOP
location.protocol
"http:"
location.host
"localhost:63342"
location.port
"63342"
location.pathname
"/JavaScript/lesson01/one.html"
location.search
"?_ijt=h4md6ke1rnp906690ha6hvbfjr"
location.hash
"TOP"
location.href
"http://localhost:63342/JavaScript/lesson01/one.html?_ijt=h4md6ke1rnp906690ha6hvbfjr"
location.reload()//刷新网页
location.assign(跳转的URL）//跳转网页

document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：

document对象还有一个cookie属性，可以获取当前页面的Cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

任何情况，你都不应该使用history这个对象了。

6.2、操作BOM对象

BOM：浏览器对象模型

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

要操作一个DOM节点，就必须先获得者DOM节点

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

var ID = document.getElementById('要选择的ID');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

更新节点

可以直接修改节点的文本，方法有两种

• 一种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：
• 两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

elementById.innerText= "124";

• 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

elementById.innerHTML = '<strong>123</strong>';

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize、属性使用字符串：

elementById.style.color = "red";
elementById.style.fontSize = '20px'

删除节点

删除节点的步骤：先获取父节点，调用父节点的removeChild把自己删掉：

<div id="id1">
    <p id="p1">as</p>
</div>
<script>
    'use strict'
   var elementById = document.getElementById("id1");
 	 var father = p1.parentElement;
    father.removeChild(p1);

</script>

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

<div id="father">
    <p>1</p>
    <p>2</p>
</div>
var father = document.getElementById('father');
parent.removeChild(father.children[0]);
parent.removeChild(father.children[1]); //  浏览器报错

浏览器报错：father.children[1]不是一个有效的节点。原因就在于，当

1

节点被删除后，father.children 的节点数量已经从2变为了1，索引[1]`已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

插入节点

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    'use strict'
        var js = document.getElementById('js');
        var list = document.getElementById('list');
    list.appendChild(js)
</script>

创建标签

从零创建一个新的节点，然后插入到指定位置：

var newp = document.createElement('p');
newp.id = 'newp';
newp.innerText = "newp";
list.appendChild(newp);

var myscript = document.createElement('script');
myscript.setAttribute("type", "text/javascript");
list.appendChild(myscript);

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。