JS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS相关的知识,希望对你有一定的参考价值。

  上周介绍了JS中两个比较重要的东西,循环和函数,这周再给大家介绍一下BOM和DOM

一、BOM

  1、首先来说一下什么是BOM,BOM即浏览器对象模型,说白一点就是与浏览器进行的交互的对象模型。

  2、BOM中的对象:

  (1)、screen对象:可以获取到屏幕的宽度、高度、可用宽度和可用高度

  (2)、location对象:取到浏览器的URL地址信息

    >>>完整的URL路径:协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点

    >>>console.log(location.href);//返回当前完整路径

        console.log(location.protocol);//返回协议名 

        console.log(location.host);//返回主机名+端口号
        console.log(location.port);//返回端口号
        console.log(location.pathname);//文件路径
             console.log(location.search);//返回?开头的参数列表
        console.log(location.hash);//返回#开头的锚点

  (3)、使用location提供的方法跳转页面方式

    >>>location.assign("http://www.baidu.com")    //加载新的文档,加载以后可以回退

    >>>location.replace("http://www.baidu.com")  //使用新文档替换当前文档,替换以后不能回退

    >>>location.reload()  //重新加载当前文档,刷新页面 ,其中可以接收参数,当不接受参数时表示在本地刷新当前页面,相当于F5;而当接收一个true参数时表示:强制刷新,从服务器端重新加载页面,相当于Ctrl+F5

  (4)、history 浏览历史

    >>>history.length;   //浏览历史列表的个数

    >>>history.back();  //后退按钮

    >>>history.forward();  //前进按钮

    >>>history.go(1);  跳转到浏览历史的任意一个页面,0表示当前页面,-1表示后一个页面(back),1表示前一个页面(forward)

  3、window对象的常用方法

  注意:在window对象中的所有方法和属性,均可以省略window关键字。例如:window.alert()==alert()

  (1)、alert();弹出一个警告提示框

  (2)、prompt();弹窗接受用户的输入

  (3)、confirm();弹出带有“确定”“取消”按钮的对话框,点击按钮返回true/false

  (4)、close();关闭当前浏览器窗口,在个别浏览器中只能关闭在当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)

  (5)、open();打开一个新窗口。

    >>>参数一:新窗口的地址

    >>>参数二:新窗口的名字

    >>>参数三:新窗口的各种属性设置,"属性1=值1,属性2=值2,属性3=值3"

  (6)、setTimeout:设置延时执行,只会执行一次,接受两个参数:需要执行的function、毫秒数

                setInterval:设置定时器,每隔n毫秒执行一次,接受两个参数:需要执行的function、毫秒数

  (7)、clearTimeout:清除延时器

          clearInterval:清除定时器

  上面的这些内容只是做一个了解,重点将是下面的DOM环节

二、DOM

  【DOM树节点】

  1、DOM分为三大类:元素节点、属性节点、文本节点。

  2、文本节点、属性节点属于元素节点的子节点。操作时,均需要先取到元素节点,再操作子节点

  3、可以使用getElement系列方法,取到元素节点。

  【查看元素节点】

  1、getElementById:通过id取到唯一节点。如果id重名,只能取到第一个

  注意:获取元素节点时,获取节点的语句必需在DOM渲染完成之后执行,可以有两种方法实现

  (1)、将JS代码写在body之后,(这个比较好)

  (2)、将代码写在window.onload函数中

  2、getElementsByName()通过name属性  

  3、getElementsByTagName() 通过标签名

  4、getElementsByClassName() 通过class名

   注意:getElements取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作。

  >>>例如getElementsByName("name1")[0].onclick=function(){};

  【查看设置属性节点】

  1、查看属性节点:getAttribute("属性名")

  2、设置属性节点:setAttribute("属性名","属性值")

  注意:查看和设置属性节点 必须先取到元素节点,才能使用!

  setAttribute()属性在ie浏览器中可能会存在兼容性问题。可能不支持这个函数设置style/onclick等样式属性和事件属性, 所以我们采用点符号法替代上述函数:   eg.  dom1.style.color = "" dom1.onclick= ""  dom1.src = ""

  【总结--JS修改DOM节点的样式】

  1、使用setAttribute()设置class和style属性,但是存在兼容性问题,不提倡使用,例如:div.setAttribute("class","cls1");

  2、使用.className直接设置class类,注意是className例如:div.className = "cls1";

  3、使用.style设置单个属性,注意属性名要用驼峰法则例如:div.style.backgroundColor = "";

  4、使用.style  或.style.cssText 设置多个样式属性:例如:div.style = "background-color:red;color:yellow;" 

                            div.style.cssText = "background-color:red;color:yellow;" 

  【查看设置文本特点】

  .innerText:取到或设置节点里面的文字内容;

  .innerhtml:取到或设置节点里面的HTML代码;

  .tagName:取到当前节点的标签名。标签名全部大写显示。

  【根据层次获取节点】

  1、.childNodes: 获取元素的所有子节点。包括回车等文本节点。

        .children:   获取当前元素的所有元素节点(只获取标签)。

  2、.firstChild: 获取元素的第一个子节点。包括回车等文本节点。

        .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。

        .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。

        .lastElementChild:获取元素的最后一个子节点。不包括回车等文本节点。

  3、.parentNode: 获取当前节点的父节点。

  4、.previousSibling: 获取当前节点的前一个兄弟节点;包括回车等文本节点。

  5、.nextSibling: 获取当前节点的后一个兄弟节点;包括回车等文本节点。

     .nextElementSibling: 获取当前节点的后一个兄弟节点;不包括回车等文本节点。

  6、.getAttributes: 获取当前节点的属性节点。

  【创建并新增节点】

  1、document.createElement("标签名"):创建节点 。需要配合 setAttribute设置各种新的属性;

  2、父节点.appendChild(新节点):末尾追加方式插入节点

  3、父节点.insertBefore(新节点,目标节点):在目标节点前插入新节点.

  4、被克隆节点.cloneNode(true/false):克隆节点

  >>>传入true: 表示克隆当前节点,以及当前节点的所有字节点;

  >>>传入false或不传:  表示只克隆当前节点,而不克隆子节点。

  【删除或替换节点】

  1、父节点.removeChild(被删节点): 删除父节点中的子节点;

  2、父节点.replaceChild(新节点,老节点): 使用新节点,替换掉老节点。

  【表格对象】

  1、rows属性:返回表格中的所有行数,是一个数组格式

  2、insertRow(index):在指定位置插入一行,index从0开始

  3、deleteRow(index):删除指定一行,index从0开始

  【行对象】

  1、cells属性:返回这一行中的所有单元格,是一个数组格式

  2、rowIndex属性:返回这一行是表格中的第几行。从0开始

  3、insertCell(index):在这一行指定位置插入一个单元格。(index)从0开始

  4、deleteCell(index):删除这一行的额制定单元格;(index)从0开始

  【单元格对象】

  cellIIndex属性:返回这个单元格是本行的第几个,从0开始

  

 







以上是关于JS的主要内容,如果未能解决你的问题,请参考以下文章

如何在一个js中调用另一个js,以及载入多个有依赖关系的js

js文件如何引用外部js

在js中获取作成者

怎么调用外部js文件?

web--JS 基础实例汇总

怎么合并js