JavaScript DOM

Posted 2020-10-02

JavaScript DOM:JavaScript Document Object Model ：动态操作页面的元素

平常做的网页中，一些动态效果，页面无刷新动态效果，单纯用css是比较难以实现的，这时，借助javascript DOM来操作网页页面的元素，使网页变得更加丰富多彩。

 

1、window.onload(页面加载完成触发事件)

　　    js文件从外边引入，或者一般如果写在head标签中，当网页加载的时候，代码从上往下依次执行，js代码也如此，当没执行到body的时候，网页上元素的标签尚未存在，如果这时候去提前操作这些标签，显然，会出错误的，

这时候，需要使用window.onload()事件，当页面加载完成的时候触发的事件，就不会出现这样的问题。

window.onload=function(){alert(‘页面加载完成‘);};


//页面触发事件:

//(1)onload (页面加载后触发)
    
//(2)onunload(页面卸载后触发)   -->只支持IE
    
//(3)onbeforeunload (页面卸载前触发)

 

2、获取页面上的元素的方法：

　　(1)通过ID获取页面中的元素

document.getElementById(‘id‘).onclick=function(){alert(‘id的点击事件‘)}

　

　　(2)根据标签名称获取页面上所有的标签，返回一个集合

var pElement=doucment.getElementByTagName(‘p‘);//获取页面上所有的p标签，返回一个集合

 

　　(3)根据元素的name来获取元素，返回一个集合

var nameElement=document.getElementByName(‘name‘);  //获取页面上所有name属性等于name的元素

 

 

3、计时器的使用 setInterval(常用)

    var IntervarId=setInterval(function(){alert(‘执行的代码，一般用匿名函数‘)},1000);   //每隔1秒进行一次
    
    //停止  需要停止就要获取所在的id(可以对setTimeout进行停止)
    clearInterval(IntervarId);
    
    //超出规定时间，执行一次代码：
    setTimeout(function(){alert(‘执行的代码‘);},2000);             //超过2秒后执行一次代码(就一次)

 

 

4、事件的对象

　　由于不同浏览器之间，有很多不同，浏览器存在一些兼容问题，不同用户使用的浏览器更是多种多样，不过一般兼容IE和火狐，基本就兼容所有浏览器(后面的jQuery可以解决这个问题，基本不会考虑浏览器兼容问题)

　　(1)IE支持的获取方法

window.event.

　　(2)火狐支持的获取方法

    function(evt)={
        evt.
    };

-->(3)兼容代码：

        function(evt)={
            var e=window.event||evt;
            e.……
        };

　

　　(4)获取最初引发事件对象(兼容代码)

        var e=window.event ||evt;
        var srcTarget=e.scrElement||e.target

//在事件处理程序中，当前事件是哪个元素的事件，那么this表示就是哪个对象， window.event.srcElement同样

//区别： this 表示当前事件的对象，window.event.srcElement表示最初引发事件的对象

 

 

5、事件冒泡

理解：如果一个p在一个div中，当p标签事件执行完毕，就会触发div标签的事件执行，一层一层的向外触发（一层一层的包含）

阻止事件冒泡(兼容代码)：

var e=window.event||evt;     
 e.cancelBubble=true;

 

 

6、坐标属性(▲常用)

    //相对于当前页面左上角的偏移坐标
        var x = e.clientX;
         var y = e.clientY;
        
    //相对于屏幕左上角的偏移坐标
         var x = e.screenX;
         var y = e.screenY;
         
    //相对于元素自己的偏移坐标
        var x = e.offsetX;
        var y = e.offsetY;

 

 

7.1、动态创建元素：

　　(1)创建一个超链接：

    var aLink=document.createElement(‘a‘);          //‘a‘为html标签名称，其他同理
    aLink.href=‘http://www.baidu.com‘;
    aLink.title=‘百度一下，你就知道‘;
    aLink.target=‘_blank‘;

 

　　(2)文本框的创建

var txtBox=document.createElement(‘input‘);           txtBox.type=‘text‘;

//根据type属性来创建input标签的其他类型

 

　　(3)表格的创建

var dTable=document.createElement(‘table‘);  //创建一个表格
    
    //遍历数据，创建行
    for(var key in data)
    {
        // var dTr=document.createElement(‘tr‘);    //创建行对象
        
        // var td1=document.createElement(‘td‘);   //创建列
        
        // dTr.appendChild(td1);                    //把列加入行中
        
        // dTable.appendChild(dTr);                 //把行加入表格中    
        
    //推荐使用的方法：兼容所有浏览器
    
        var dRow=dTable.insertRow(-1);              //向表格中插入一行，-1为索引，追加到最后一行
        dRow.insertCell(-1).innerHTML=key;          //向行中插入单元格，追加到最后
        dRow.insertCell(-1).innerHTML=data[key];    
    }

 

 

7.2删除层中的元素

　　(1)方法一：彻底删除

    var divObject=document.getElementById(‘div1‘);     //获取层
    
    while(divObject.firstChild)          //如果层中什么都没有，将返回一个undefined，有即返回第一个子元素
    {    
        divObject.removeChild(divObject.firstChild);    //把第一个子元素删除，后面第二个子元素就变成了第一个,以此类推，依次清空
    }

 

　　(2)方法二：简单删除

    divObject.innerHTML=‘‘;                //简单可以删除，复杂(比如关联事件等)删除不彻底

 

 

8、JS操作样式：

　　(1)设置层的样式：

 xxx.style.backgroundColor=‘xx‘;             //精髓：去掉横杠，首字母大写
    
xxx.style.cssFloat=‘right‘                  //设置右浮动
    
style.overflow=hidden;                      //设置隐藏

 

　　(2)动态应用样式：

document.getElementById(‘div1‘).className=‘样式类名‘; 

 

 

9、JS操作表单：

　　(1)手动获取表单提交按钮：

document.getElementById(‘btn‘).click=function(){};

 

　　(2)调用表单的submit方法来提交：

document.getElementById(‘from1‘).submit();

 

　　(3)为表单注册一个提交事件，提交的时候触发：

document.getElementById(‘from1‘).onsubmit=function(){ alert(‘表单提交事件‘)};

 

　　PS: 如果使用表单按钮来提交表单(1)，则会触发onsubmit事件，如果使用submit方法来提交(2)，则不会触发onsubmit事件

 

 

10、JS中使用正则表达式：

　　(1)正则表达式的使用：

var email=/^\[email protected]\w+(\.\w)+$/                  //创建一个正则表达式：/^正则表达式$/

//调用正则表达式对象的test()方法，测试是否匹配，返回true或者false
var bool= email.test(string); 

 

　　(2)exec方法：

  var xx=/\d+/g;        xx.exec(string)     //使用exec()方法对字符串提取
        
//当正则表达式后面加g(全局模式)，反复调用exec()方法，提取每个字符(不使用则都是匹配第一个)

  var result=xx.exec(string);
  while(result)
  {
     alert(result);
     result=xx.exec(string);                //遍历下一个，当遍历完则判断为false
}

 

　　(3)字符串的math方法(方便快捷)

    var result=string.match(/\d+/g);             //正则使用全局模式  遍历输出

 

　　(4)字符串的replace方法替换

    var result=string.replace(/\正则表达式/g,‘替换的字符‘)

 

11、总结：

　　JavaScript DOM中，有许多方法和用法，也存在很多的浏览器兼容问题，要用到浏览器的能力检测去解决。jQuery会解决这些兼容问题。