js的dom操作

照例,先来几句没怎么又用的话,

DOM是Document Object Model的缩写,dom是文档对象模型,这种模型是树模型;文档指标签文档;对象是指文档中的每个元素,模型则是抽象话的东西。

  说实话,dom不知道该在什么地方开始着手整理,下面这是基于讲义进行整理的

    一  window.open

      Window.open分为下面几个部分,

        1   写页面地址

        2 _back打开方式,是在新窗口还是在自身窗口

        3  控制打开窗口格式,可以写多个用空格隔开,如下 

          toolbar=no 新打开窗口没有工具条

          menubar=no 没有菜单栏  status=no 没有状态栏

          width height  宽度高度

          left=100  打开窗口距离左边的距离

          resizable-no 窗口大小不可调

         scrollbars=yes  出现滚动条

         location=yes 有地址栏。

    window.open也有返回值,他的返回值是新打开窗口对象,例如

        打开窗口:window.open(“Untitled-6.html”)

        把打开的窗口保存在变量中 var w=window.open()

        如果打开的是多个窗口,则可以保存在数组中

         function open w (){

        w [i++]=window.open() 

        }

    二window.close()是关闭窗口和window.open()相反

        关闭多个子窗口可以先将打开的窗口存在数组中,用循环将他们挨个关闭。

         关闭打开当前窗口的原窗口 window.opener.close()

     三 延迟和间隔

       间隔执行一段代码(函数)window.setInterval("要执行的代码",时间间隔毫秒数)

       清除间隔执行 window.clearInterval(间隔的ID)

       延迟一段时间执行某一段代码(函数):window.setTimeout("要执行的函数体",延迟的毫秒数)

       清除延迟 window.clearTimeout(延迟的id),清除setTime

      四 调整页面

        window.navigate("url") 跳转至目标页面,在谷歌浏览器下有bug

        window.moveTo(x,y)移动页面至某一位置(IE专用)

        window.resizeTo(宽,高)   ( IE专用)

        window.scrollTo(x,y) 滚动页面至哪里,y表示纵向滚动

    五 模态对话框和非模态对话框

      模态对话框垄断了用户的输入。当一个模态对话框打开时,用户只能与该对话框进行交互,而其他用户界面对象收不到输入信息。模态对话框下,用户需要操作目标对话框就必       须先操作模态对话框。

         打开模态对话框 window.showModalDialog("url",“向目标对话框传的值”,“窗口特征参数”) 特征属性分号隔开,像素用px。dialogHeight dialogWidth center等

      非模态对话框则相反,当一个非模态对话框打开时,用户依然可以操作其他页面。

         打开非模态对话框 window.showModelessDialog("url","向目标对话框传的值","窗口特征属性")

      var a=window.dialogArgument,可以用一个参数来获取模态或非模态对话框传递的值

    六 window对象

        window.history对象

          window.history.back; 页面进行后退

          window.history.forward; 页面前进

          window.history.go(n);  n如果是正数代表前进n个页面,n如果是负数,则代表后退几个页面(比较常用这一种)

        window.location对象

          loction 地址栏

          var a=window.location.href;获取当前页面的地址

          window.location.href="http://www.bidu.com";修改页面地址,会跳转页面

          window.location.hostname:主机名,域名,网站名,可用变量接收。

         window.location.pathname:路径名,可用变量接收

       window.status对象

          status 状态栏,可以给状态栏添加要显示的文字

          window.status="要在状态栏显示的内容";设置状态栏文字

       七  Window.document

           1 找到元素:

             document.getElementById("id") 根据id找,最多找一个

             document.getElementByName("name") 根据name找,找出来的是数组。

             document.getElementByTagName("name") 根据标签名找,找出来的是数组

             document.getElementByClassName("name")根据classname找,找出来的是数组

          1.1 非表单元素

            var a= document.getElementById("id") 

             a.innerHtml  标签里的html的代码和内容都会获取到

            a.innerText  只取里面的文字

            a.outHTML 包括标签本身的内容 (简单了解)

          2)设置内容

           a.innerHTML="<font color=red>你好</font>"    div中的内容被替换掉

            赋值个空字符串可以把内容清空

          1.2表单元素

            1获取内容,有两种方式

              var a=document.f1.t1    form表单ID为f1里面的ID为t1的input; 或者var a=document.getElementByID("id"),直接用id获取

            a.value 获取input中的value值 

            2可以设置内容  a.value="内容改变"

            3 一个小知识点,<a href="www.baidu.com" onclick="return flase">转向百度</a> 加了return flase则不会跳转,默认是return true会跳转,如果按钮中设置看return flase则网页不会跳转。。

          1.3操作属性

          首先利用元素的ID找到该元素 存于一个变量中

           var a=document.getElementByID("id")

           然后可以对该元素的属性进行操作

           a.setAttribute("属性名","属性值");设置一个属性,添加或者更改都可以

           a.getAttribute("属性名");获取属性值

          a.removeAttribute("属性名");移除一个属性

        1.4操作样式

           首先利用元素的ID找到该元素 存于一个变量中

           var a=document.getElementByID("id")

          a.style.样式=“”   操作id的样式

        1.5相关元素操作  

           var a= document.getElementById("id") 找到id  

           var b= a. nextSibling 找到a的下一个同辈元素    注意空格

           var c = a. previousSibling 找到a的上一个同辈元素  注意空格

          var d = a.parentNode 找到a的上一级父辈元素

    var e= a.childNodes  找出来的是数组 找a的下一级子元素

         var f= a.firstChild   第一个子元素   lastChild 最后一个  childNodes[n] 找到第几个

         alert(nodes[i] instanceof Text)判断是不是文本   是返回TRUE  不是返回flase   用if判断他的值是不是flase 可以去除空格

       1.6 元素的创建 添加和删除

        var a=document.getElementById("id")找到id

        var obj=document.createElement("标签名") 创建一个元素     obj.innerHTML="hello world" 添加的时候首先要创建出一个元素

        a.appendChild(obj) 向a中添加一个子元素

        a.moveChild(obj) 删除一个子元素

         列表中a.selectIndex: 选中第几个 a.options[a.selectIndex] 按下标取出第几个option对象

       1.7 字符串的操作

         var a = new String() 或者 var a ="sssss"

         var a ="hello"

         a.toLowerCase 转小写   a.toUpperCase( ) 转大写

         a.substring(2,3)从第二个位置截取到第三个位置

         a.substr(2,3)  从第二个位置开始截取后边的三个长度。不写后边的数字就截取到最后

         a.split('') 将字符按照指定字符拆开

         a.lenght  是属性

        a.indexOf("world")  world在字符串中第一次出现的位置    没有就返回-1

        a.lastIndexOf("o") o在字符串中最后一次出现的位置

     1.8 时间操作

        var a=new Date()    当前时间

        var a = new Date(1999,3,2) 定义一个时间     1999,4,2   月份要加1

       a.getFullYear: 取年份 a.getMonth 取月份 取出的月份少1    a.getDate()取天 a.getDay 取星期几 a.getHours 取小时 a.getMinutes()  取分钟   a.getSeconds()取秒

       a.setFullYear  设置年份  设置月份的时候注意加1

     1.9 数学函数操作

       Math.cile()  大于当前小数的最小整数

       Math.floor  小于当前小数的最大整数

       Math.sqrt()  开平方

       Math.round()  四舍五入

       Math.random() 随机数  0-1 之间

   小知识点

      外面双引号   里面的双引号改为单引号

       在div里面行高和整个外面高度一样才能用竖直居中  居中是行居中

       文本框取出来的值是字符串      需要用  parseInt()转化成数字

       a.match(reg)  s代表字符串   reg代表一个字符串  两者进行匹配    如果两个字串不匹配  返回   null

               

  

      

原文地址:https://www.cnblogs.com/cyd123/p/6656662.html