JS笔记

js的组成

js由ECMAScript(语法标准)、DOM(网页)、BOM(浏览器)三部分组成

BOM

BOM是js中的顶层对象，所有的全局都属于window。
BOM和DOM和ECMAScript的关系:

• BOM是运行平台，BOM规则建立在ECMAScript的规则之上；
• DOM是运行在平台上的页面；
• ECMAScript是用来操作平台或运行平台上的页面的操作。

window身上的方法

内置函数：alert()、parseInt()、setInterval()、……

信息框:alert();

对话框：prompt(“请输入用户名”)；
              确定：拿到输入的信息 取消：null
选择框：confirm(“会弹出什么呢?”);
              确定返回true，取消返回false

window下的子对象

1.history:该对象包含浏览器访问过的url
属性
history.length:返回历史记录的数量

方法

• history.back():后退，加载前一个url
• history.forward():前进，加载后一个url
• history.go(num):参数为正，前进相应的数目，参数为负，后退相应的数目，为0，刷新

2、location:包含当前url的相关信息

属性

• location.href:设置或返回完整的url
• location.search:返回url ？后面的查询部分
• location.hash:是一个可读写的字符串，是url的锚部分（从#开始的部分）

方法

• location.reload():刷新页面的方法，一般情况下，传递一个true
• location.assign(url):加载新页面，当url为空字符时，加载当前页面。

3、navigator:浏览器信息

属性：

navigator.userAgent:返回浏览器信息

DOM

选择器

1. 元素节点选择器：id、class、name、targetName、高级、关系选择器
   class、Name、targetName选择器：返回的是数组对象，如果要使用其中的元素，通过索引解析。

2. 高级选择器(ES5新增)
   querySelector:返回的是单个对象
   querySelectorAll:返回的是数组对象，如果要使用其中的元素，通过索引解析。

注意：getEle×××By×××和querySelector的区别
getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

querySelector和querySelectorAll():
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

如果只要一次查找就可得到元素时，首选getXXXByXXX ；
如果需要经过多级查找，才能得到元素时，首选querySelector；

举例说明区别

<ul>
    <li>12</li>
    <li>34</li>
    <li>56</li>
</ul>

 var oUl=document.getElementsByTagName("ul")[0];
 var oLi=oUl.getElementsByTagName("l9i");
 console.log(oLi.length);                               //3
 oUl.appendChild(document.createElement("li"));
 console.log(oLi.length);                             //4

 var oUl=document.querySelector("ul");
 var oLi=oUl.querySelectorAll("li");
 console.log(oLi.length);                                           //3
 oUl.appendChild(document.createElement("li"));
 console.log(oLi.length);                                           //3

3. 关系选择器

      children:父选子
      parentNode:子选父
      firstElementChild:第一个子元素
      lastElementChild:最后一个子元素
      previousElementSibling:上一个兄弟元素
      nextElementSibling:下一个兄弟元素

  <div>我是.box的上一个兄弟</div>
    <div class="box">
        <p>我是p2</p>
        <span class="sp">我是一个span</span>
        <p>我是p1</p>
    </div>
    <ul class="list">
        <li>这是第一个li</li>
        <li>这是第二个li</li>
    </ul>

  var obox=document.querySelector(".box");
    var osp=document.querySelector(".sp");
    var oul=document.querySelector(".list");
    console.log(obox.children);
    console.log(osp.parentNode);
    console.log(obox.previousElementSibling);
    console.log(obox.nextElementSibling);
    console.log(oul.firstElementChild);
    console.log(oul.lastElementChild);

4. 其它节点选择器
这里的节点注意不只是css的节点，还有html的节点。
节点类型:文本节点，属性节点，元素节点，注释节点，document,documentFragment

      childNodes:儿子节点(父选子)
      firstChild:第一个儿子节点
      lastChild:最后一个儿子节点
      previousSibling:上一个兄弟节点
      nextSibling:下一个兄弟节点

<div class="box">
    <p>我是p2</p>
    <span class="sp">我是一个span</span>
    <p>我是p1</p><!--我是一段注释-->
</div>

Tip：因为该节点选择器包含空白节点、注释节点、文本节点、元素节点，所有div下面的子节点个数为9个。

节点的四属性

• attributes:获得所有属性节点，返回一个数组(伪数组)
  伪数组：可以使用索引和长度遍历，但是不能使用数组的方法，所有的DOM选择器，返回的数组都是伪数组。

• nodeName(元素的标签名，只可以读）

• nodeValue(可以写）

• nodeType(节点的类型)

	节点类型(nodeType)	节点名字(nodeName)	节点值(nodeValue)
元素节点	1	标签名	null
属性节点	2	#text	文本
文本节点	3	#comment	注释的文字
注释节点	8	#document	null
文档节点	9	属性名	属性值

<div class="box" a="10" b=20 id="cont" title="这是一个div"><!--这是一个注释--></div>

属性的操作

1. 可见：看的见的属性
   内置：系统内置的属性
                  操作方法：1、对象的操作方法 2、系列专属方法：get/set/remove Attribute()
   非内置：自定义的属性
                  操作方法：系列专属方法:set/get/remove Attribute()

<div a="10"></div>

var obox=document.getElementsByTagName("div");
console.log(obox.getAttribute("a"));    //10
console.log(obox.setAttribute("a","hello"));    //a="hello"

2. 不可见的
   内置：系统内置的属性
                  操作方法：对象的操作
   非内置：对象的操作

DOM的操作

增

var odiv=document.createElement("div");              //创建一个节点div
var otxt=document.createTextNode("我是一个div");     //创建一个文本节点
odiv.appendChild(otxt);                             //将文本内容添加到div中
document.body.appendChild(odiv);                   //将创建的div节点添加到body中

删

<div class="box"></div>

var obox=document.querySelector(".box");
obox.remove();                                  //直接删除
document.body.removeChild(obox);   //通过父元素来删除其子节点

改

<body>
    <div class="box">hello world</div>
</body>

<script>
    var obox=document.querySelector(".box");
    console.log(obox.innerHTML);
    obox.outerHTML="<span class='"+obox.className+"'>"+obox.innerHTML+"</span>";
</script>