JavaScript基础部分3

Posted 2020-10-15

1.节点及类型

1） 文档节点 整个html文档

2） 元素节点：html文档中的html标签

3） 属性节点：元素的属性，可以直接通过属性的方式操作

4） 文本节点：是元素节点的子节点，其内容为文本

2.事件：用户和浏览器之间的交互行为

1） 交互事件的定义1：onclick :当鼠标点击的时候发生事件；如下

<button id="bt" onclick=alert("hello")>你好！</button>

2） 交互事件的定义2：ondblclick：当鼠标双击是发生事件

<button id="bt" ondblclick=alert("hello")>你好！</button>

3)  交互事件的定义3：onmousemove :当鼠标移动到接近的位置的时候发现相应的事件

    <button id="bt" onmousemove=alert("hello")>你好！</button>

以上方法不建议使用:耦合性太强；

3.获取元素节点

3.1通过doucument调用：

1） Document.getElementById:根据id的属性获取对应的单个节点  如下：

var bt=document.gettElementById（“id”）；

2）  document.getElementsByTagName:根据标签名获取指定节点名字的数组，数组对象的length属性可以获取数组的长度 如下：

       var lis= document.getElementsByTagName("li")；alert(lis.length); 可以用于列表等

3） document.getElementsByname:根据标签的名称获取指定节点名称的数组，数组对象length属性可以获取数组的长度  例如：

var genderNodes=document.getElementsByName("gender"); alert(genderNodes.length);  可以用于多选框等

4） 其它两个方法ie不支持，所以不建议使用

5） body：获取body的属性，document.Body

6） documentelement:对应的是html的根标签，document. Documentelement

7） all：代表的是页面中所有的元素   document.all

8） getelementsbyclassname()：根据元素的class属性值查询一组元素节点对象document. Getelementsbyclassname(“class”)  ie8及以下不支持

9） queryselector（）可以通过css选择器字符串作为参数；document. queryselector（”div.box”） ie8及以上都支持，但是这个方法对于倘若有多个元素符合这个条件，那么只返回第一个

10）  queryselectorall（”div.box”） 针对queryselector（）而言可以查询所有，放入数组中

3.2  通过元素节点调用

1） GetElementsByTagName（）方法：返回当前节点的指定标签名的后代节点 与document的调用方式相同；但是范围不同；如下

      window.onload=function(){

var bt=document.getElementById("bt");

        bt.onclick=function (){

        var  city=document.getElementById("city");

        var  lis=city.getElementsByTagName("li");

        for (var i=0;i<lis.length;i++) {

         alert(lis[i].innerHTML);}}}

2） ChildNodes属性：表示当前节点的所有子节点，包含文本在内的所有节点，例如</li>后的回车，但是ie8及以下的浏览器中不会将同上的回车空白等当为子节点

      window.onload=function(){

   var bt=document.getElementById("bt");

        bt.onclick=function (){

        var  city=document.getElementById("city");

        var  lis=city.childNodes;

         for (var i=0;i<lis.length;i++) {

         alert(lis[i].innerHTML);

              }

           }

         }

3） FirstChild属性：表示当前节点的第一个子节点；包含空白；

4） Firstelementchild属性：表示当前节点的第一个子元素，但是不知此ie8及以下的浏览器；

5） Lastchild属性：表示当前节点的最后一个子节点；包含空白

6） lastelementchild属性：表示当前节点的最后一个子元素，但是不知此ie8及以下的浏览器

7） Children属性：表示当前节点的所有子元素，这里的元素指的是标签，如下：

window.onload=function(){

var bt=document.getElementById("bt");

           bt.onclick=function (){

           var  city=document.getElementById("city");

           var  lis=city.children;

           for (var i=0;i<lis.length;i++) {

           alert(lis[i].innerHTML);}}}

8） Parentnode属性：表示当前节点的父节点；父节点没有文本的可能只有可能是元素；

9） Previoussibling属性：表示当前节点的前一个兄弟节点，可能获取空白文本

10）  Previouselementsibling属性：表示当前节点的前一个兄弟元素，ie8及以下不支持

11）  Nextsibling属性：表示当前节点的后一个兄弟节点，可能获取空白文本

12）  Nextelementsibling属性：表示当前节点的后一个兄弟节点，ie8及以下不支持

13）  Innerhtml属性:输出文本内容

14）  Innertext属性：同innerthml类似，不同的是他会将标签都去除

4.页面加载说明

Onload：整个页面加载完成后加载

绑定方式：image window layer  都可以，但是我们常用的是window  绑定：window.onload;

5.获取元素的属性及设置

1） 获取class，需要改为相应的改为classname；如下

<button id="bt" name="张三" class="类" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

     bt.onclick=function (){

           var bt= document.getElementById("bt");

           alert(bt.className);}}

2） 除上述较为特殊之外，获取id，name等属性方法都类似如下

<button id="bt" name="张三" class="类" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

     bt.onclick=function (){

     var bt= document.getElementById("bt");

     alert(bt.name);}}

3） 获取文本信息，如下

<button id="bt" name="张三" class="类" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

     bt.onclick=function (){

     var bt= document.getElementById("bt");

     alert(bt.innerHTML);}

4） 设置属性的内容和对象相似；

6.dom的增删查改

1) createlement（）属性：创建一个元素节点对象 var div= document. createlement（”div”）

   2) createtextnode()属性：创建文本节点 var text=document. createtextnode(“text”)

   3) appendchild（）属性：可以向一个父节点添加一个子节点 父节点. appendchild（子节点）  div. appendchild（text） 默认加载在最末位置

   4) insertbefore（）属性：在指定的子节点前面插入新的节点 父节点. insertbefore（新子节点，原本的子节点）

   5）removechild（）属性： 删除子节点   父节点.removechild（子节点）

   6）innerhtml属性：添加   var names=document。Getelementbyid（names“”）

names.innerhtml+=(“<li>张三</li>”) 有缺陷，因为都是新建，改善方法如下

var li=document.createelement(“li”); li.innerhtml=”广州”;city.appendchild(li);

    7）confirm（）用于弹出确认或者取消的弹出框  confirm会返回一个返回值，如果点击确认为true否则是false；

7. 取消网页的默认跳转：在事件函数的末尾设置renturn false 也可以在href属性中填写javascript：；的格式书写；

在文本链接中添加属性

href=”javascript”;

8. 修改及读取css的样式

语法 ：元素.style.width 注意css的样式名中有减号在js中不合法的，需要将这样样式名修改为驼峰命名法  例如background-color  该我backgroundColor，倘若样式中写了！important 则此时样式会有最高的优先级，读方式box1.style.width

通过style属性读取的都是内联样式 无法读取样式表中的样式，currentStyle获取当前显示的样式如果没有设置相应的格式那么会读取默认的值 只有ie支持；其他浏览器都不支持；在其他浏览器中可以使用getcomputedstyle（）这个方法来获取元素的当前属性，这个是window的方法，可以直接使用，  这其中需要两个相应的参数，第一个，要获取样式的元素，第二个为伪元素，一般是选择null，该方法会返回一个对象，该对象中封装了当前元素对应的样式，例如getcomputedstyle（box1,null）.width, currentStyle和getcomputedstyle（）有一定的区别，getcomputedstyle（）在没有设置宽度是  读取的是auto，而 currentStyle获取的值是当前显示的像素值； getcomputedstyle（）不支持ie8及以下的ie浏览器

自定义通用式：

Function getstyle(obj,name){

If(window.getComputedStyle){

return getComputedStyle(obj,null)[name]；}else{

return obj.currunStyle【name】；}

}Alert(getStyle(box1,”width”))

ClientWidth  clientHeight 这两个属性可以获取元素的可见宽度和高度，这是属性只能读不能改

• offsetwidth  offsetheigth包括元素整个的宽度和高度  只能读不能改
• offsetparent  获取当前元素定位的父元素 获取当前元素最近的祖先元素 只能读不能改
• offsetleft 当前元素相对于定位元素的水平偏移量 只能读不能改
• offsettop 当前元素相对定位元素的竖直偏移量 只能读不能改

scrollheight  滚动元素的高度  只能读不能改

scrollwidth  获取滚动的宽度 只能读不能写

scrollleft 获取水平滚动条滚动的相对距离

scrolltop 获取垂直滚动条滚动的距离

clientwidth 等于设置的宽度减去滚动条的距离

9. 冒泡

大部分事件都是向上传递的 大部分冒泡是有用的

如果不希望冒泡可以通过对象相应的取消冒泡 cancelbubble

事件的冒泡可以减少事件的绑定，可以减少绑定的次数

10. Event事件

target表示触发的对象

• onscroll：滚动条滚动时触发

事件对象：

Keycode 相应的可以获取按键的编码

Onkeydown  某个按键按下  会连续触发

Onkeyup 每个时间松开  不会连续触发

Onmousedown  当鼠标按下时 不松开

Onmouseup 当鼠标松开时触发

Onmousemove：当鼠标移动时触发

Clientx 鼠标触发时的鼠标的x坐标  

Clienty 鼠标出发时的鼠标的y坐标

Onmousewheel 鼠标滚轮滚动时触发  在火狐中不兼容 dommousescroll来绑定事件

火狐需要通过addeventlistener 进行次相应的绑定

If(!event){event=window.event}

function（event）{var x=window.event.clientx};

ie8没有直接传递数据，而是保存在window中

11. Bind绑定

使用 对象.事件=函数的形式绑定响应函数

他只能同时为一个元素的一个事件绑定

Addeventlistener （） 通过这个方法也可以为元素绑定函数

事件触发的字符串 不要on

回调函数当时间触发时该函数被调用

是否再捕获触发时间 需要一个布尔值 一般都传false 

Bt.addeventlistener （“click”，function（）{

}，false）

Bt.addeventlistener （“click”，function（）{

}，false）

先绑定的先执行，后绑定的后执行，相当于java中的一个集合，在集合中添加相应的元素 ie8及以下不支持

在ie8及以下中 可以用attachevent解决此问题 用法都差不多，这里的事件需要的on

与上不同的是后绑定先执行

12. bom

1） bom对象  window  navigator  location history screen

2） window 整个浏览器的窗口 也是网页中的全局变量

3） navigator 代表的当前浏览器的信息  通过对象可以获取相应的信息 能识别浏览器  可以用useragent获取浏览器信息 activexobject只有ie里面有 Boolean变成fasle，可以利用是否包含某个属性

4） location  代表的当前的地址栏信息 也可以操作浏览器页面 设置location相应的可以跳转网页（也可以用相对路径）reload刷新页面 assign也是重定向页面，刷新页面有缓存，也可以设置清除缓存 如果在reload方法中传递一个true，清空缓存，replace替换，也是可以用新的页面替换跳转页面，replace跳转后不能回退，replace不会生成回退记录

5） history  浏览器的历史记录 可以通过该对象获取操作浏览器的历史记录，由于隐私的原因，该对象不能获取具体的历史记录 只能操作浏览器向前或者向后，而且该操作只在当次访问时有效 其中的length属性可以获取当前的访问数量 back（）跳转到后一个页面   forward（）跳转到下一个页面 go（）可以相应的跳转到指定页面 1表示向前跳转1个页面  2是向前跳转两个页面 -1是向后跳转一个页面  -2是向后跳转两个页面

6） screen  可以获取显示相关的信息

13. 定时器

Setinterval：定时调用  可以将一个函数每个一段时间调用一次类似java的sleep

参数  回调函数  每次回调的时间 单位为毫秒

Clearinterval（定时对象）  关闭定时器 每点击一次就会调用一次 我们只能关闭最后一次定时器  只希望开启一个定时器 开启定时器之前关掉一个定时器

Settimeout：延时调用，其他类似setinterval  延时调用只会执行一次 这是于setinterval的区别  

14 类的操作

1） classname 修改值

2） 向一个class中添加属性值  addclass（obj，cn）添加class属性的对象 obj要添加class的元素，cn要添加的class的值

3） hasclass（obj，cn）判断obj中有没有cn这个class 有就返回true  没有就返回false

4） removeclass（obj，cn） 删除指定的class属性

5） tagclass（obj，cn）没有就添加 有就删除相应的class