浏览器对象

一、事件
- 事件对象
- 事件的冒泡
- 事件的委派
- 事件的绑定/注册
- 常用事件
- 事件的传播
二、DOM对象
- 1.DOM查找
- 2.DOM树修改
- - DOM树添加
  - DOM删除和替换
- 3.DOM属性和样式修改
- - 样式的相关属性
三、BOM对象
- Window
- Navigator
- History
- Location
补充知识
- JSON数据
- 类的操作

一、事件

事件是电脑输入设备（鼠标、键盘）与页面进行交互的响应

事件对象

除IE8及以下版本的浏览器：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下，鼠标滚轮滚动的方向…
clientX可以获取鼠标指针的水平坐标 event(形参).clientX
clientY可以获取鼠标指针的垂直坐标
除了火狐浏览器：事件对象是作为window的一个属性，直接window.event(形参).clientX
解决兼容性问题：event=event||window.event
clientX和clientY用于获取鼠标在当前的可见窗口的坐标而div的偏移量是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标（IE8及以下版本不可用）

事件的冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发（一定是相同事件onclick等）
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡：给函数设置一个事件对象形参，在代码末尾 event.cancelBubble=true;

事件的委派

给每一个元素依次添加事件，或者每新建一个元素都添加一个事件比较麻烦，并且性能低，直接给这些元素共同的父元素绑定事件，可参考博文：事件委派详解
使用event.target.className=="link"来判断触发对象是不是我们期望的元素，是则执行（target获取触发事件的对象）

事件的绑定/注册

告诉浏览器，当事件响应后要执行哪些操作代码

静态注册事件：
将事件写在标签中，一般都只写一句代码或者直接调用一个已经写好的函数
<tag on事件=“事件处理程序”/>
(作为html语言出现，则大小写是不区分的)
动态注册（绑定）：
一般在window.onload页面加载完成时执行的函数里进行动态绑定事件代码）
先通过js代码得到标签的DOM对象，再通过DOM对象.事件名=function(){}
使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，会出现函数的覆盖
(1) addEventListener() 通过这个方法为元素绑定响应函数（IE8及以下版本不支持）
(2) 对象.addEventListener(“事件的字符串去掉on”，function(){…},false) 最后一个参数：是否在捕获阶段触发事件，需要一个bool值，一般传false
(3) 使用addEventListener可以同时为一个元素的相同事件绑定多个响应函数，当事件被触发时，响应函数会按照函数绑定顺序依次执行（在IE8及以下版本中：对象.attachEvent(“事件的字符串要on”,function(){…});
也可以为一个对象的相同事件绑定多个响应函数，只不过执行顺序是先绑定后执行）
```
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit",function() {  console.log("表单提交中");
});
```
浏览器的兼容：
自己设置函数参数：obj要绑定事件的对象 eventStr事件的字符串（不要on） callback回调函数
function(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);(回调函数中的this是obj对象)
}
else{
obj.attachEvent(eventStr+“on”,callback);（回调函数中的this是window对象）
将window对象准换为obj对象：callback---->function(){ callback.call(obj);} 浏览器调用的函数我们不能改调用对象，但是自己调用的函数可以更改，第二种浏览器调用匿名函数function，我们再用自己想用的调用方式调用callback函数
}
}

常用事件

onload:加载完成事件页面加载完成之后，常用于做页面js代码初始化操作
(1)静态：写在body标签中 < body οnlοad=“loadEvent()”>
(2)动态：window.onload = function(){};
onclick:单击事件常用于按钮的点击响应操作
(1)静态：一般写在button标签中
(2)动态：var btn=document.getElementById(“”);
btn.onclick = function(){};
onblur：失去焦点事件常用于输入框失去焦点后验证其输入内容是否合法
onchange:元素失去焦点并且内容发生改变事件常用于下拉列表和输入框内容发生改变后的操作
onsubmit:表单提交事件常用于表单提交前，验证所有表单项是否合法
return false 可以阻止表单提交，在验证到不合法时就return false
< form action=“http://localhost:8080” method=“get” οnsubmit=“return fun()”> //一定要写一个return
< input type=“submit” value=“静态注册”>
< /form>
function fun(){
alert(“静态注册页面”);
return false;
}

select事件
select事件：文本框中的文本被用户选中时发生。
只能作用在的文本框里面，可以用 window.getSelection().toString()获取选择的文本。

<body>  <input type="text" value="赵钱孙李，周吴郑王" onselect="selectEve()"/>  <script>  function selectEve() {   console.log(window.getSelection().toString());  }  </script>
</body>

键盘事件
1.键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document（输入框）
2.onkeydown:一直按着某个键事件会一直触发，连续触发时，第一次和第二次之间会间隔稍微长一些，其他的会非常快
3.onkeyup:按键被松开
4.event.keycode判断哪个按键被按下
event.altKey ctrlKey shiftKey判断对应是否被按下
5.return false 取消默认行为（向焦点框里自动添加输入按键）可以实现规定哪些按键能被按下
6.在使用时可以先输出按下键的编码来帮助写代码
7.键盘事件有三种：
按键按下：keydown，用户按下键盘上的键；
按键释放：keyup，用户释放按键；
点击按键：keypress，用户按下并且释放了按键。
8.这些事件处理程序中的函数都会传入一个event的参数，其中event.which表示点击的按键的编码。这个编码是该按键的unicode编码。
```
<body onkeyup="upEvent(event)">
</body>
<script>  function upEvent(event) {  console.log("编码是:"+event.which);  }
</script>
```

事件的传播

1.由内往外传播、冒泡传播
某个事件触发了某个元素的事件处理程序，接下来，就会自动沿着节点树往根节点的方向依次触发经过的路径上的所有元素的某个事件的处理程序。
如果div里有p，点击p相当于点击了div，则不仅会触发p标签的click事件，也会触发div标签的click事件
停止冒泡：想要在哪里停止事件的冒泡，就在它的子元素的事件处理程序的最后调用event.stopPropagation()即可

function clickChild() {  console.log("子");  window.event?window.event.cancelBubble=true:event.stopPropagation();   //如果是根结点，直接可以设置取消冒泡为true，如果不是就采用stopPropagation()
}

2.三个阶段：捕获阶段（由外向内捕获事件），目标阶段，冒泡阶段（由内向外执行事件）（在IE8及以下版本没有捕获阶段）

二、DOM对象

1.DOM查找

对网页进行增删改查：查找节点，读取节点，修改节点，创建节点，删除节点
节点：文档节点、元素节点、属性节点、文本节点
按id属性，精确查找一个元素对象
var elem=document.getElementById(“id”);效率非常高只能用在document上不是所有元素都有id（不加就不会执行）
按标签名查找
varelems=parent.getElementsByTagName(‘tag’); 注意是单引号，返回一个数组，需要通过下标访问
查找指定parent节点下的所有标签为tag的子代节点
（1）.可用在任意父元素上
（2）.不仅查直接子节点，而且查所有子代节点
（3）.返回一个动态集合，即使只找到一个元素，也返回集合必须用[0]，取出唯一元素
var elems =ul.getElementsByTagName(‘li’);
通过name属性查找
var elem = document.getElementsByName (‘name属性值’);
可以返回DOM树中具有指定name属性值的所有子元素集合
或者：window.document.form1.userName.value.length对象树从上往下查找（比较长）
通过class查找
查找父元素下指定class属性的元素
var elems = parent.getElementsByClassName(‘class’); 有兼容性问题 IE8以下版本不支持
通过css选择器查找
元素、类、Id、后代、子代、群组选择器
var elems = parent.querySelector(“selector”); Selector支持一切css中选择器，如果选择器匹配的有多个，只返回第一个
var elsms = parent.querySelectorAll(“seletor”);查找多个选择器，返回的是非动态集合
innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义，读取元素节点属性：元素.属性名(class标签用className)
innerText 获取元素内部的文本，纯文本，不含元素
根据属性查找父元素下的所有子节点：
父元素.childNodes 获取所有节点，根据DOM标准标签间写的空白也是节点（IE8及以下版本除外）
------换成用children属性，获取当前元素的所有子元素，不会包含空白文档
父元素.firstChild 获取父元素下第一个节点（包含空白文本）
------换成用firstElementChild获取第一个子元素（不支持IE8及以下版本）
父元素.lastChild 获取父元素下的最后一个节点
找父节点：子节点.parentNode;
找前兄弟节点：子节点.previousSibling; (会获取空白处) 子节点.previousElementSibling; (会获取前一个节点，不包含空白) 找兄弟节点：
document.body------body标签
document.documentElement------html标签
document.all------页面中所有的元素，返回值为一个数组相当于getElementByTagName(“*”)
confirm()用于弹出一个有确认和取消的提示框---------有bool型的返回值

2.DOM树修改

DOM树添加

创建空元素
var elem = document.createElement(“元素名”)
var table = document.ceateElement(“table”);
设置关键属性
elem.属性名=“属性值”
elem.innerHTML=“go to tmooc” a.href=“http…”
设置关键样式
元素.style.样式名=样式值
elem.style.opacity=“1”;
elem.style.cssText=“width:100px;height:100px”;(可添加多个样式)
将元素添加到DOM树 parentNode.appendChild(childNode); 添加在最后一个父元素
parentNode.insertBefore(newChild,existingChild) 在父元素中的指定子节点之前添加一个新的子节点，指定子字节通过查找得到
添加元素优化：尽量少的操作DOM树，每次修改DOM树，都导致重新layout，先构建好小树，再挂到DOM树上
（1）如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面上
（2）如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中，再将文档片段整体添加到页面
文档片段：内存中，临时保存多个平级元素的虚拟父元素，用法和普通父元素完全一样
步骤：
（1）创建片段： var frag =document.createDocumentFragment()
（2）将子元素临时追加到frag中 frag.appendChild(child);
（3）将frag追加到页面 parent.appendChild(frag);
append之后，frag自动释放，不会占用空间
注意：
DOM操作中如果涉及父元素，直接元素.parentNode就行，不用管是谁

使用innerHTML也可以实现增删改查，直接改html代码，但是要避免不直接操作DOM树

DOM删除和替换

删除：parent.removeChild(child)
替换：（1）先删除再替换
（2）parent.replace(newchild,oldchild);
一般用于select的option的增删改中，实现级联菜单样式

<html><head><title>myTitle</title><meta charset="utf-8" /></head>
<body>
<select id="province" onChange="changeCity()"><option value="BeiJing" id="bj">北京</option><option value="AnHui" id="ah">安徽</option>
</select>
<select id="city"><option value="BeiJingCity">北京市</option>
</select>
<script>
function changeCity() {var province = document.getElementById("province");var city = document.getElementById("city");var length = city.children.length;for(var i = length-1;i >= 0;i--) {city.removeChild(city.children[i]);}if(province.value == "BeiJing") {var child1 = document.createElement("option");child1.value="BeiJingCity";child1.innerText="北京市"city.appendChild(child1);} else {var child1 = document.createElement("option");child1.value="HuangShanCity";child1.innerText="黄山市";city.appendChild(child1);//请在此处编写代码/*********Begin*********/var child2 = document.createElement("option");child2.value="HeFeiCity";child2.innerText="合肥市";city.appendChild(child2);/*********End*********/}
}
</script>
</body>
</html>

3.DOM属性和样式修改

DOM标准：
核心DOM：可操作一切结构化文档的AOI，包括HTML和XML（万能、繁琐）
HTML DOM：专门操作HTML文档简化版DOM API仅对常用的复杂的API进行了简化（不是万能，简单的）
修改属性四个操作：
（1）读取属性值
先获得属性节点对象，再获得节点对象的值： elem.attributes[下标/属性名] elem.getAttributeNode[属性名] attrNode.value-----属性值；
直接获得属性值：elem.getAttribute(“属性名”) --得到的是字符串
elem.属性名 --得到的是原始数据类型
（2）修改属性值
elem.setAttribute(“属性名”,value)
elem.属性名=属性值
标签之间的文本用innerText属性表示，要修改上面超链接里面的文本，需要这样：document.getElementById(“a1”).innerText=“educoder”;
（3）判断是否包含指定的属性：
element.hasAttribute(‘属性名’) 返回值为bool类型
（4）移除属性
elem.removeAttribute(“属性名”)
注：class等文档元素的属性，不能直接用文档元素对象.class来获取，因为class是JavaScript中的关键字，需要用className来代替。但是，如果用的是getAttribute()，直接用class作为参数就行。
```
<a class="aClass" id="aId">超链接</a>
document.getElementById("aId").className;//返回"aClass"
document.getElementById("aId").getAttribute("class");//返回"aClass"
```
修改样式:（修改的是内联样式，具有较高的优先级，改后立即显示，但如果在样式中写了!important,则此时样式会有最高优先级，js修改代码会失效）
(1)内联样式：elem.style.属性名（也可以用来读取样式，读取的也是内联样式，如果内联样式没有就为空）
（2）属性名：去横线，变驼峰（background-color-----backgroundColor ）
获取元素的当前显示样式(都是只读的,修改只能用style)
元素.currentStyle.样式名-----可以获取当前元素正在显示的样式（如果没有设置样式就获取默认样式（宽度：auto），只有IE浏览器支持，其他的都不行）
（除IE8及以下版本的）浏览器通用：getComputedStyle() 这个方法是window的方法，可以直接使用
需要两个参数：
1.需要获取样式的元素
2.传递一个伪元素，一般为null
该方法会返回一个对象，对象中封装了当前元素对应的样式，访问：对象.样式名，如果没有设置样式，会获取真实的值，而不是默认值，比如宽度：auto(默认值)—>具体宽度；颜色—>rgb值

兼容所有浏览器（自己创建一个判断方法）：(兼容性问题都是一个思路，先判断有没有，有就用，没有就不用)

function getStyle(obj,name){
if(window.getComputedStyle) (在IE8中直接用getComputedStyle会报错，因为不存在这个变量，但是用Window.getComputedStyle属性会返回undefined,不会报错)
return getComputedStyle(obj,null)[name];(不写.name，写了表示访问name属性，写死了)
else
return obj.currentStyle[name];
或者 return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}

样式的相关属性

都是只读属性，修改只能修改style

clientWidth clientHeight------这两个属性可以获取元素的可见宽度和高度，不带px，返回数字可直接进行计算
offsetWidth offsetHeight—获取元素的整个宽度和高度，包括内容区、paddig、border
offsetParent—用来获取当前元素的定位父元素，获取到离当前元素最近的开启了定位的祖先元素，如果都没开则返回body
offsetLeft offsetTop—获取当前元素相对于其定位父元素的水平、垂直偏移量
scrollWidth scrollHeight-----可以获取元素的滚动区域高度和宽度
scrollLeft scrollTop—获取滚动条水平和垂直滚动的距离
当满足scorllHeight - scorllTop ==clientHeight 时说明垂直滚动条滚动到底了
当满足scorllWidth - scorllLeft = clientWidth时说明水平滚动条滚动到底了

三、BOM对象

专门操作浏览器窗口的API,BOM可以使我们通过js来操作浏览器
BOM常见对象：
（1）Window–代表整个浏览器的窗口，也是网页中的全局对象，网页中的变量–window的属性，网页中的函数–window的方法
（2）Navigator–代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
（3）Location–代表当前浏览器的地址栏信息，可以获取地址信息，或者操作浏览器跳转页面
（4）History–代表浏览器的历史记录，可通过其来操作浏览器的历史记录，由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前向后翻页，而且该操作只能在当次访问时有效
（5）Screen–代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息
（6）其他：document、event

Window

使用：直接使用或者作为window的属性使用
获取当前窗口大小：完整窗口大小：window.outerWidth/outerHeight
文档显示区大小：window.innerWidth/innerHeight
定时器：让程序按指定时间间隔自动执行任务，实现网页动态效果、计时功能等
分类：
周期性定时器：setinterval(ex p,time)
exp:执行语句
time:时间周期，单位为毫秒
注：在开启下一个定时器时要先关闭当前元素的上一个定时器，不然会出现定时器重复开启（加速）
停止定时器：（1）首先给定时器取名：var timer =setinterval(…)
（2）然后停止定时器：clearinterval(timer);
clearinterval()可以接受任何参数，包括null,undefined,如果参数有效则执行，无效则什么都不做
一次性定时器：让程序延迟一段时间执行 setTimeout(exp,time)
time:时间间隔，单位为毫秒
window.clearTimeout( name )取消定时器
窗口
打开浏览器的窗口:window.open(url,name,specs,replace)用来打开一个浏览器的窗口，后两个一般不用
url:表示窗口里面的文档的地址；
name:（1）name是窗口的名字：浏览器会先判断这个窗口是否已经打开。已经打开则用新的url里面的文档替换这个窗口里面原来的文档，反映到浏览器上是不会有新的标签页打开，但是一个已存在的标签页会刷新。没有打开则打开一个新的窗口，并且载入url里面的文档。
（2）name是_blank、_self里面中的任何一个

specs：控制新窗口的尺寸等特征，比如值为width=200,height=100时，表示新窗口宽度为200px，高度为100px。
replace用来控制新的窗口在浏览器的浏览历史里面如何显示。为true表示装载到窗口的url替换掉浏览历史中的当前条目；为false表示装载到窗口的url创建一个新的条目。
关闭浏览器的窗口：
window.open()会有一个返回值result，result.close()用来关闭打开的窗口

Navigator

（1）由于历史原因，Navigator对象中的大部分属性都不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器的信息，不同浏览器有不同的userAgent，配合正则表达式（是否含有浏览器名字关键字）来判断是什么浏览器
（2）由于IE11没有MSIE关键字，所以IE浏览器不能这样操作，但是IE有很多自己特有的对象和属性，我们可以通过判断是否存在来看
if(“ActiveXObject” in winodw）一个特殊的对象（即window的属性）

History

（1）length属性，可以获取到当前访问的链接数量
（2）back（）可以回退到上一个页面，与返回按钮一样
（3）forward（）可以跳转到下一个页面，作用与前进按钮一样
（4）go()可以跳转到指定页面，它需要一个整数作为参数：
1–向前跳转一个页面
2–向前跳转两个页面
-1–向后跳转一个页面
-2–向后跳转两个页面

Location

location对象就是window.location，记载了浏览器当前所在的窗口的URL（统一资源定位符）信息，它常常被用来实现网页的跳转。

直接打印，可以获取当前页面的完整路径 console.log(window.location.href);
window.location.href还是可写的，如果把它设置为一个新的地址，当前窗口将立即打开这个新的地址，这是实现页面跳转的一种方式。
其他属性
https://www.educoder.net:8080/shixun.html?tab=1
可以直接修改Location为相对路径或者绝对路径，并且会生成历史记录
Location.assign(“…”)------>跳转到其他页面
Location.reload()------->刷新页面
传一个参数true:强制清空缓存（与ctrl+f5是一个效果，完全清空文本框内容）
Location.replace(“…”)用新的页面替换当前页面，但是不会生成历史记录，不能使用回退按钮回退

补充知识

JSON数据

JSON是用来传递数据的，必然要先存储数据，存储数据需要采用一定的数据格式，JSON常用的数据格式有JSON对象、JSON数组和JSON字符串。

JSON对象
JSON对象（通常叫JSON）是一种文本数据的交换格式，用于存储和传输数据。
（1）数据以键/值对的形式存在；
（2）数据之间用逗号间隔；
（3）大括号表示保存对象；
（4）方括号表示保存数组。
与javascript对象的区别：
（1）JSON对象的属性名（key）必须被包含在双引号之中，而JavaScript对象除了有空格的属性名、中间有连字符-的属性名必须在双引号之中外，其它随意；
（2）不能在JSON对象中定义方法，而在JavaScript对象中可以；
（3）JSON对象可以被很多语言操作，而JavaScript对象只有JS自己可以识别。
支持JSON的语言都能够使用JSON对象，这里仅介绍在JavaScript中如何使用JSON对象。
```
//在JavaScript中定义一个JSON对象：
var jsonObject = {"name":"js","number":2};  //操作属性，使用.或者[]：  console.log(jsonObject.name);//读属性，输出js
console.log(jsonObject["name"]);//读属性，输出js
jsonObject.name = "javascript";//写属性，给name属性赋值javascript  //删除属性，使用delete：  var jsonObject = {"name":"js","number":2};
delete jsonObject.name;//删除name属性  //遍历属性，使用for-in循环：  var jsonObject = {"name":"js","number":2};
for(att in jsonObject) {  console.log(jsonObject[att]);//依次输出js、2
}
```

JSON数组
JSON对象的属性值除了是基本数据类型，还可以是数组和对象
[]表示数组，{}表示对象

{
"class":"高三一班",
"studentNumber":70,
"score":[  {"name":"LiMing","score":128},  {"name":"ZhangHua","score":134},  {"name":"ShenLu","score":112}
]
}

JSON字符串
在前端和后台之间传递数据可以使用JSON，但是实际上传递的是JSON字符串，而JSON对象是不可以直接进行传递的。
（1）JSON字符串到JavaScript对象:
JSON.parse(a,b)方法将JSON字符串a转换为JavaScript对象。b是一个可选的函数参数。

var JSONString1 = '{"k1":"v1","k2":"v2"}';
console.log(JSON.parse(JSONString1));//输出Object {k1: "v1", k2: "v2"}  //函数参数b按从里到外的顺序作用在对象的所有属性上，最后一个作用的是对象本身：//对象的每一个属性的值加1
var text = '{ "key1":1, "key2":2, "key3":2.2}';
var obj = JSON.parse(text, function (key, value) {  if(key === '')//当遇到对象本身时，不进行加1操作  return value;  return value+1;//对属性值加1
});
console.log(obj);//输出Object {key1: 2, key2: 3, key3: 3.2}

如上面所示，函数的参数有两个，其中key表示属性的名字，value表示属性的值，当遇到对象本身时，key的值为’'，即空字符串。

（2）JSON对象转为JSON字符串：
JSON字符串就是在JSON对象两边套上’形成的字符串，如：

var JSONObject  = {"k1":"v1","k2":"v2"};//JSON对象
var JSONString1 = '{"k1":"v1","k2":"v2"}';//JSON字符串

JSON.stringify(a,b,c)，a是待转换的JSON对象，b和c为可选参数。

JSON.stringify(a,b,c)  //a是待转换的JSON对象，b和c为可选参数。var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);//JSON对象转换为JSON字符串  //参数b为函数时，该函数按照从里到外的顺序处理JSON对象的每一个属性，最后一个处理的是JSON对象本身，处理完后再转为JSON字符串：//对象的所有属性值加1，再转为字符串
var JSONObject = {"k1":1,"k2":2.2};
var JSONString = JSON.stringify(JSONObject,function(k,v){  if(k === '')//处理到了JSON对象本身  return v;  return v+1;//所有的属性的值加1
});
console.log(JSONString);//输出{"k1":2,"k2":3.2}  //参数b还可以是数组，数组存储的是属性的名字，用来指定只转换哪些属性：//转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};
var JSONString = JSON.stringify(JSONObject,["k1","k2"]);
console.log(JSONString);//输出{"k1":1,"k2":2.2}  //参数c：文本添加缩进、空格和换行符，如果 c 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 c 大于 10，则文本缩进 10 个空格。var str = ["name":"Tom","age":16];
var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);
console.log(obj1);  //输出{"name":"Tom","age":16}
console.log(obj2); //输出
//{
//    "name": "Tom",
//    "age": 16
//}

类的操作

在js中同时修改多个样式属性：
box.className = “b2”;
不采用一个一个样式地修改，直接修改元素的class属性（设置一个新的class），浏览器只需要重新渲染一次，性能高，可以将行为和表现分开
添加多的样式，或者修改部分样式：
box.className+=" b2" ;注意加一个空格
自己设置addClass 、hascClass(利用正则表达式判断是否有某个类和removeClass三个函数)

javascript学习笔记下篇--浏览器对象相关推荐

JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)--Promise对象引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
JavaScript学习笔记之原型对象
本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...
javascript学习笔记之document对象、表单及表单元素、脚本化cookie
一.document对象每个window对象都有document属性.该属性引用表示在窗口中显示的HTML文档的document对象. 1.关键方法 close()关闭open方法打开的文档 ope ...
JavaScript --- [学习笔记]观察者模式理解对象工厂模式构造函数模式
说明本系列(JS基础梳理)为后面TCP的模拟实现做准备本篇的主要内容: 观察者模式.工厂模式.构造函数模式和对对象的理解 1. 观察者模式参考JavaScript设计模式 1.1 消息注册方 ...
JavaScript学习笔记——underscore操作对象的方法
var obj = {a:'aaa',b:'bbb',c:'ccc'}; 1._.keys(obj)获取对象的所有属性名称 2._.values(obj)获取对象的所有属性值 3._.extend(d ...
JavaScript --- [学习笔记] 原型模式
说明接JavaScript - > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式上一篇构造函数模式创建的实例,不同实例的同一个方法是不相等的, ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03-数组-Data对象-Math对象-包装类-字符串-正则
目录一.数组索引数组的特点 1.1.数组的创建 1.1.1.使用new关键字(构造函数) 1.1.2.使用字面量形式 1.1.3.创建数组的注意事项 1.2.数组的基本使用 1.2.1.存操作( ...

javascript学习笔记下篇--浏览器对象