javaScript基础

最新推荐文章于 2020-09-04 19:24:43 发布

芒果-橙

最新推荐文章于 2020-09-04 19:24:43 发布

阅读量233

点赞数

分类专栏： Web前端基础文章标签：浏览器 javascript

本文链接：https://blog.csdn.net/qq_35893033/article/details/77188002

版权

Web前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、浏览器对象

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.onload

2）若布局中有（如οnclick="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   //获取 对象 的宽度