javaScript基础
2017-08-15 13:42
447 查看
一、浏览器对象
1、window对象：指当前的浏览器窗口
方法：
2、定时器：可设定一个时间之后，再来运行
var timer=setInterval( function(){ ...//做的事情 } ， 'slow' ); ----每隔指定时间之后执行，会一直执行clearInterval( timer) ; ---结束指定的计时器，参数就是计时器对象
var timer=setTimeout(); 运行一次后就自动结束
clearTimeout(timer); ---清除计时器
var num=0;
var i;
function startCount(){ //计时器实现计数功能
clearTimeout(i);
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
};3、History对象：记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能
window.history.[属性|方法]
History对象属性：
length---返回浏览器历史列表中的URL数量
History对象方法：
back()/forward()---加载history列表中的上/下一个URL 【back()=go(-1) forward()=go(1)】 go()---加载history列表中的某个具体的页面
1 ---前一个，相当于forward(1) 0 ---当前页面 1 ---后一个，相当于back(-1) 其它数值---要访问的URL在History的URL列表中的相对位置
【从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。】
4、Location对象：用于获取或设置窗体的URL，并且可以用于解析URL
location.[属性|方法]
属性：
hash---设置或返回从#开始的URL（锚） host---主机名和当前URL的端口号 hostname---当前URL的主机名 href---完整的URL pathname---当前URL的路径部分 port---当前URL的端口号 protocol---当前URL的协议 search---从?开始的URL（查询部分）
方法：--- [参数的URL是会将原来的url+上]
assign()---加载新的文档 reload()---重新加载当前文档 replace()--用新的文档替换当期文档
5、Navigator对象---包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
var browser=navigator.appName;
appCodeName---浏览器代码名的字符串表示 appName---返回浏览器的名称 appVersion---浏览器的平台和版本信息 platform---运行浏览器的操作系统平台 userAgent---由客户机发送服务器的user-agent头部的值 示例：例子
6、screen对象---获取用户屏幕的信息
window.screen.属性
availHeight/availWidth---窗口可以使用的屏幕高/宽度【减去界面特性，比如任务栏】 colorDepth---用户浏览器表示的颜色位数 pixelDepth---用户浏览器表示的颜色位数（ie不支持） height/width---屏幕的高/宽度
7、注意事项：
1）将<script>放在<head>标签里，会先加在<script>，若想先将布局加载，得用window.onload2）若布局中有（如onclick="methodName()" ）先要用到<script>，则得先让<script>加载
3）同样的，如果<script>在前面，但有获取布局中的对象（如getElementById()），则得先让布局加载
二、DOM---文本对象模型
1、DOM结点
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。 2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
结点属性： nodeName---返回一个字符串，其内容是给定结点的名字 nodeType---返回一个整数，这个数组代表给定结点的类型 nodeValue---返回给定结点的当前值 遍历结点树： childNodes--返回一个数组，这个数组由给定元素结点的子节点构成 示例
2、document.getElementsByName("name") ---通过name属性值，返回带有指定名称的节点对象的集合
3、document.getElementsByTagName(" li" ) ---通过标签名，返回指定标签的节点对象的集合
4、elementNode.getAttribute(name); ---通过元素节点的属性名称获取属性的值。
5、elementNode.setAttribute(name,value); ---增加一个指定名称和值的新属性，或把一个现有的属性设定为指定的值
6、结点属性：
1) nodeName : 节点的名称 ·元素节点的 nodeName 与标签名相同 ·属性节点的 nodeName 是属性的名称 ·文本节点的 nodeName 永远是 #text · 文档节点的 nodeName 永远是 #document
2) nodeValue ：节点的值 ·元素节点的 nodeValue 是 undefined 或 null ·文本节点的 nodeValue 是文本自身 ·属性节点的 nodeValue 是属性的值
3) nodeType ：节点的类型 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9
7、elementNode.childNodes; ---访问选定元素节点下的所有子节点的列表，返回的值是一个数组（伪）
8、node.firstChild/lastChild; ---属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 null 【空格chrome、firefox等浏览器标签之间的空白也算是一个文本节点也会算进去】
9、elementNode.parentNode; ---获取指定结点的父节点
10、 nodeObject.nextSibling/ previousSibling ; ---获取指定结点的下一个/上一个兄弟结点
function get_nextSibling(n){ //封装获取下一个兄弟结点 n--指定的结点元素
var x=n.nextSibling;
while (x && x.nodeType!=1){ //如果不是元素结点，则继续往下查找
x=x.nextSibling;
}
return x;
}11、.appendChild(newNode); ---向指定元素结点插入一个子节点，放在最后
12、 parentNode.insertBefore(newNode ,childNode); ---向指定元素结点插入一个子节点，放在指定的子节点的前面
13、nodeObject.removeChild(node); ---删除子节点,若 删除成功，可返回被删除的结点[node]，否则null ---删除所有子节点示例
14、node.replaceChild(newNode,oldNode); ---实现子节点(对象)的替换。返回被替换对象的引用
15、document.createElement( 'tagName'); ---创建一个元素结点
16、document.createTextNode( 'data'); ---创建一个文本结点，返回新创建的Text结点 ---示例
17、获取浏览器窗口可视区域的大小（浏览器的视口，不包括工具栏和滚动条）【仍不理解，待完善】
var width= window.innerWidth || document.documentElement.clientWidth; ---考虑兼容性
window.innerWidth ---IE9+、Chrome、Firefox、Opera 以及 Safar（浏览器）
document.documentElement.clientWidth ---IE 5~8
document.body.clientWidth ---IE 5~8
18、scrollHeight ---获取网页内容的大小 【仍不理解，待完善】
var h= document.body.scrollHeight||document.documentElement.scrollHeight; ---兼容性
19、offsetHeight = clientHeight + 滚动条 + 边框 ---网页尺寸 【仍不理解，待完善】
Offset属性
获取一个标签的宽度，因为用 div.style.width只能得到行内的数值，而我们通常使用的是内嵌式，外链式
var h= document.documentElement.offsetHeight || document.body.offsetHeight; ---
offsetWidth = width + border + padding 不包含margin //获取 对象 的宽度
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 