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

Dom基础

什么是DOM

Dom和JavaScript

获取页面元素

事件

window对象的方法

事件冒泡

动态创建DOM

js操作页面样式

正则表达式

热门文章

最新文章

相关电子书

相关实验场景