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,'');
               }

posted @   wolfy  阅读(374)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手