JavaScript的BOM、DOM操作、节点以及表格(二)

2018-06-24 02:00:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

BOM操作

一、什么是BOM

BOM(Browser Object Model)即浏览器对象模型。
     BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
     BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;

二、BOM常用的对象

Screen对象:尺寸
    window.screen;
    screen.width
    screen.height
    screen.availHeight//可用高度 = 可用高度-底部任务栏高度
    screen.availWidth//可用宽度

Location对象:地址
    console.log(location)
    location.href//完整的URL地址
    location.protocol//协议名
    location.hostname//主机名
    location.port//端口名
    location.host//主机名+端口名
    location.pathname//文件路径
    location.search//从?开始的部分
    location.hash//从#开始的部分

History对象:历史
    history.length;//用于记录当前页面跳转的历史记录的个数
    history.forward();//点击去前一页,相当于浏览器的前进按钮
    history.back();//点击去后一页,相当于浏览器的后退按钮
    history.go():表示跳转到浏览器的任意界面
    history.go(-1);//后一页,相当于history.forward()
    history.go(0);//当前页,表示刷新当前页面
    history.go(1);//前一页,相当于history.back()

Navigator对象:(了解)返回关于浏览器的各种系统信息。

Windows常用的方法

 Window对象的常用方法:

    1.window.alert():弹窗输出
  2.window.prompt():弹窗输入
  3.window.confirm():带确认、取消的提示框。分别返回true,false。
  4.window.close():关闭浏览器窗口。
  5.window.open():打开一个新窗口,参数1:地址;参数2:新窗口的名字;参数3:新窗口的各种配置属性;
  6.window.setTimeout():延时器,表示延时多少ms后执行一个函数。参数1:函数名或者匿名函数;参数2:毫米;参数3:传给页面的参数
  7.window.setInterval():定时器,每隔多少毫秒执行一遍函数,其他用于与setTimeout完全相同。
  8.clearInterval()、clearImmediate():分别清楚定时器、延时器。声明定时器可以接受一个ID,传给clearInterval().

DOM操作

1.DOM节点数  

  1.DOM节点分为三类:元素节点(标签节点),属性节点,文本节点。
    属性节点和文本节点都属于元素节点的子节点,因此操作时,需要先选中元素节点,再修改属性和文本。

2.查看元素节点

    1、使用getElement系列方法。

            window.onload = function(){
                var lis  = document.getElementById("first");
                
                var lis1 = document.getElementsByClassName("cls");
                
                var lis2 = document.getElementsByName("na");
                
                var lis3 = document.getElementsByTagName("li");}

 

  2、注意事项:

      (1)ID不能重名,如果ID重复,只能取到第一个。
      (2)获取元素节点时,必须等到DOM树加载完成后才能获取。

          两种方式:①将JS写在文档之后。②如图,写在window.onload中。
      (3)通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作。
      (4)这一系列方法,也可以先选中DOM节点,从选择的DOM节点中在选择需要的节点。

 

  3、通过querySelector()系列方法

    (1)传入一个选择器名称,返回找到的第一个元素,通常用于查找ID
    (2)传入一个选择器名称,找到所有元素,无论找到几个,都返回一个数组格式的元素。

 

document.querySelector("#first");
document.querySelectorAll("#div li");

 

3.设置属性节点

  1.查看属性节点:getAttribute("属性名")
  2.设置属性节点:setAttribute("属性名","属性值")
  3.删除属性节点:removeAttribute("属性名");
  4.注意事项:setAttribute()在老版本的IE中会出现兼容性问题,可以使用点符号(.)代替,设置属性。

【JS修改CSS的多种方式】

  (1)使用setAttribute()设置class和style
  (2)使用 .className 添加一个class选择器,修改style
  (3)使用.style.样式  直接修改单个样式,注意样式名必须使用驼峰命名法。
  (4)使用.style.  或 .style.cssText  直接修改样式。

             document.getElementById("first").setAttribute("class","class1");
             document.getElementById("first").setAttribute("style","color:red;");
             document.getElementById("first").getAttribute("style");//查看CSS
             document.getElementById("first").style.fontSize = "20px";
             document.getElementById("first").removeAttribute("style");//移除CSS
             
             document.getElementById("first").style = "font-size: 20px";//IE不兼容
             document.getElementById("first").style.cssText = "font-size: 20px";

 

4.查看设置文本节点

  (1)innerHTML : 取到或者设置一个节点中的HTML代码。
  (2)innerText: 取到或者设置一个节点中的文本,不能设置HTML代码。

            var s1 = document.getElementById("first").innerHTML;
            document.getElementById("first").innerHTML = "<a>yiyiyi</a>";


            var s2 = document.getElementById("first").innerText;
            document.getElementById("first").innerText = "teset";

 JS中的层次节点

1.基本节点

  1.childNodes:获取当前节点的所有子节点(元素节点和文本节点)

  2.children:获取当前节点的所有元素子节点(不包含文本节点)

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

  4.firstChild:获取第一个子节点,包括回车符等字符节点

  5.lastChild:获取最后一个子节点

  6.firstElementChild:获取第一个元素节点,不含回车符等字符节点。

  7.lastElementChild:获取最后一个元素节点,不含回车符等字符节点。

  8.previousSibling:获取当前节点的前一个兄弟节点,包括文本节点

  9.previousElementSibling:获取当前节点的前一个元素兄弟节点,不包括文本节点。

  10.nextSibling:取当前节点的后一个兄弟节点,包括文本节点

  11.nextElementSibling:获取当前节点的后一个元素兄弟节点,不包括文本节点。

  12.attributes:获取当前节点的属性节点,返回数组模式。

2.创建添加节点

  1.document.createElement("标签名"):创建一个新节点。
     需要配合setAttribute()为新节点设置属性。

                var img = document.createElement("img");
                img.setAttribute("src","../../01-HTML基本标签/img/Female.gif_temp.bmp");

2. ①父节点.insertBefore(新节点,目标节点):在父节点中,将新节点插入到目标节点之前。

  ②父节点.appendChild(新节点):在父节点的最后插入新节点。

  ③原节点.cloneNode(true):克隆一个节点。

    传入true表示克隆原节点及原节点的所有子节点

    传入false表示只克隆原节点,不可隆其它子节点。

            window.onload = function(){
                var ul = document.getElementById("ul1");
                //插入目标之前
                document.getElementsByTagName("div")[0].insertBefore(img,ul);
                
                //插入到最后
                document.getElementsByTagName("div")[0].appendChild(img);
                //克隆
                var newUL = ul.cloneNode(true);
                document.getElementsByTagName("div")[0].appendChild(newUL);
            }

 

3.删除替换节点

  ①父节点.removeChiled(子节点):从父节点中,删除指定子节点。

  ②父节点.replaceChild(新节点,老节点):从父节点中,用新节点替换老节点。

                document.getElementsByTagName("div")[0].removeChild(newUL);
                document.getElementsByTagName("div")[0].replaceChild(img,ul);

 JS对表格的操作:

HTML表格中的对象有三种:

  1.表格对象:var table = document.getElementById("table");
  2.行对象:table.rows[0]
  3.单元格对象:table.rows[0].cells[0]

表格对象中的属性和方法

  1.rows属性:返回当前表格的所有行,为数组格式。

  2.insertRow(index):在表格的index行插入一个新行,返回新产生的对象。

  3.deleteRow(index):删除表格的第index行。

行对象的属性和方法

  1.cells属性:返回当前行中的所有单元格对象,为数组格式。

  2.rowIndex属性:返回当前行在表格中的下标。

  3.insertCell(index)属性:表示在行中的index位置,插入一个新单元格,返回新产生的单元格对象。

  4.deleteCell(index)属性:表示删除本行中的第index个单元格。

单元格对象的属性和方法

  1.cellIndex属性:返回当前单元格在本行中的下标

  2.innerHTML/innerText/className/style.color等都可以使用。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript 高级之面向对象

下一篇:前端模块化小总结—commonJs,AMD,CMD, ES6 的Module