Dom基础-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Dom基础

简介:

 什么是DOM        

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。

JavaScript只是执行一些计算,循环等操作,最终是要操作Html页面,让Html变成DHtml,而操作Html页面就要用到Dom

Dom就是把Html页面模拟成一个对象,提供了操作各个节点的方法

Dom和JavaScript

JavaScript-->DOM就是C#-->.Net Framework

CSS+JavaScript+DOM=DHtml

获取页面元素

window.id(window是dom中的一个顶级对象,代表当前年浏览器窗口)

document.getElementById()

事件

onclick=f1;鼠标点击事件触发了一个方法f1    

      document.body.onclick范围仅限于body         

document.onclick范围为整个文档

window对象的方法

window.confirm('确定要删除吗?');//确定取消对话框,返回true或false         

window.navigate(url);将网页重新导航到url,只支持IE和空中         

window.location.href='url';支持大部分浏览器,与上面相比,比较推荐         

window.location.reload():刷新当前页         

window.setInterval(code,delay)每隔一段时间执行指定的代码,code表示代码字符串,delay表示时间间隔,返回intervalId          window.clearInterval(intervalId)清除计时器         

window.setTimeout定时执行,只执行一次         

window.clearTimeout清除定时                 

window.event.altKey:bool类型,表示事件发生时是否按下了alt键

window.event.ctrlKey:bool类型,表示事件发生时是否按下了ctrl键

 window.event.shiftKey:bool类型,表示事件发生时是否按下了shift键

 IE和火狐的兼容写法:

复制代码
1  document.body.onmousemove=function(){
2                          if(window.event){
3                               document.title=window.event.clientX+','+window.event.clientY;
4                          }else{
5                               document.title=arguments[0].clientX+','+arguments[0].clientY
6                          }
7                     };
复制代码

window.event.clientX:发生事件时鼠标在客户区的横坐标         

window.event.clientY:发生事件时鼠标在客户区的纵坐标         

screenX、screenY:发生事件时鼠标在屏幕上的坐标

offsetX、offsetY:发生事件时鼠标相对于事件源的坐标

window.event.returnValue:如果为false,取消默认事件的处理   return false;(推荐)

window.event.srcElement:获得事件源对象

screen.width和screen.height:分辨率

clipboardData对象,对粘贴板的操作

setData("Text",val)设置粘贴板中的值

clipboardData.setData('text',url)赋值

getData("Text")读取粘贴板的值

clipboardData.getData('text')粘贴

clearData("Text")清空粘贴板

案例:

复制代码
1  document.body.oncopy=function(){
2                               alert('禁止复制!');
3                               return false;
4                         }
5                          document.getElementById('t').onpaste=function(){
6                               alert('禁止粘贴');
7                               return false;
8                          }
复制代码

window.history.back()历史记录后退

window.history.forward()历史记录前进

window.history.go(-1)后退 

window.history.go(1)前进

body、document对象的事件

onload(页面加载后触发)

onunload(页面卸载后触发)

onbeforeunload(页面卸载前触发)  

1 <body onbeforeunload="window.event.returnValue'Are you sure?'"></body>
2  <body onbeforeunload="return 'Are you sure?'"></body>

document.write();向文档中写入内容

document.writeln();向文档中写入内容,最后添加一个回车

只有在页面加载过程中write才会与原有内容融合在一起,writeln是在源代码里面换行
如果创建一个按钮动态添加点击事件后产生一个window.write(),一点就没了

document.getElementById()根据元素的id获得对象

document.getElementsByName()根据元素的name获得对象,返回对象数组

document.getElementsByTagName()获得指定标签名称的元素数组(不用forin循环,用for循环)

事件冒泡         

如果A元素嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick事件也会被触发,顺序是由内到外
      取消事件冒泡:window.event.cancelBubble=true;
      事件源:window.event.srcElement

动态创建DOM         

document.write()只能在页面加载过程中才能动态创建

document.createElement()

 案例:        

复制代码
1  function showIt(){
2                          var divMain=document.getElementById('divMain');
3                          var btn=document.createElement('input');
4                          btn.type='button';
5                          btn.value='动态创建的button';
6                          divMain.appendChild(btn);
7                     }
复制代码

createElement('element')创建一个节点

appendChild(node)追加一个节点

removeChild(node)移除一个节点

replaceChild(new,old)替换一个节点

insertBefore(new,参照)把节点加到前面

innerText元素标签内内容的文本表现形式

innerHTML(所有浏览器都支持)元素标签内内容的HTML源代码

js操作页面样式       

修改元素的样式不是设置class属性,而是className属性

驼峰命名法:
               style.fontSize
               style.marginTop
               style.styleFloat='right'     其它浏览器是style.cssFloat='right'
动态设置元素的位置、大小
          style.display='none'控制层的显示     block或none
          style.width='80px';
          style.height='80px';
          style.overflow='hidden'层内内容隐藏
 层的操作
          position
               static:无定位,显示在默认位置
               absolute:绝对定位(常用,可以通过代码修改元素的坐标)
               fixed:相对于窗口的固定定位
               relative:相对元素默认位置的定位
 form对象
              document.getElementById('btn').click()点击后相当于点击了搜索按钮
               submit()提交表单,但是不会触发onsubmit事件
 不同浏览器的差异
              不同浏览器中对DOM支持的方法不一样
               获取网页中的那个元素触发了事件:IE(srcElement)     FF(target)
               使用Dom获取和更改网页标签元素内文本:IE(innerText)     FF(textContent)
               动态为网页或元素绑定事件:IE(attachEvent)     FF(addEventListener)
               不同浏览器对CSS的支持不一样

正则表达式         

创建正则表达式         

 var regex=new RegExp('\\d{5}')
 var regex=/\d{5}/(推荐,不用管转义符了)

          RegExp对象的方法
                   test(str)判断字符串str是否匹配正则表达式,相当于IsMatch
                    regex.test('a@b.com')
                    exec(str)进行搜索匹配,返回值为匹配结果,相当于match()和matches(),返回的是结果数组,没有匹配结果的话返回null
          string的正则表达式方法
               var s='aaa@163.com';
               var regex=/(.+)@(.+)/;
               var match=s.match(regex);
               s.replace(/正则/g,'要替换的字符串')
          模拟Trim()方法
               var str='     aaaaaa       ';
               alert('---'+exTrim(str)+'---');
               function exTrim(s){
                    return s.replace(/(^s+)|(\s+$)/g,'');
               }

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/3192725.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章