• 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

                   

      

          

  • 相关阅读:
    ObjectiveC语法快速参考
    IIS网站全部显示无权访问需要登录
    如何让自己的网站尽快收录绍兴114导航
    asp.net的运行原理
    WPF学习视频资料
    Asp.net MVC3 自定义HtmlHelper控件
    Unity3D中C#和JS的方法互相調用
    对于冒泡算法的思考,大牛可一笑而过~~
    2013年年前瞻望与计划
    使用vs2010编辑Unity脚本,配置方法
  • 原文地址:https://www.cnblogs.com/cyd123/p/6656662.html
Copyright © 2020-2023  润新知