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
选择器
-
元素节点选择器:id、class、name、targetName、高级、关系选择器
class、Name、targetName选择器:返回的是数组对象,如果要使用其中的元素,通过索引解析。 -
高级选择器(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
- 关系选择器
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、对象的操作方法 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"
- 不可见的
内置:系统内置的属性
操作方法:对象的操作
非内置:对象的操作
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>