Python学习——JS基本语法（二）——DOM操作

DOM操作

• DOM，Document Object Model，文档对象模型
• 将HTML中的元素当做JS中的对象进行操作，称为DOM操作
• window对象表示浏览器中打开的窗口，document对象整个文档
• DOM操作核心：找到对象、添加事件、修改样式、……
• 在JS中样式的名字采用的是小驼峰的命名规则，如：backgroundColor
• console.log可以将数据输出到控制台，不会影响页面内容

查找元素

• getElementById：根据ID，获取的是一个元素
• getElementsByClassName：根据class属性查找元素，返回的是数组
• getElementsByTagName：根据标签名查找元素，返回的是数组
• getElementsByName：根据name属性查找元素，返回的是数组

JS事件

• onclick：单击
• ondbclick：双击
• onfocus：获取焦点
• onblur：失去焦点
• onmouseover：鼠标移入
• onmouseout：鼠标移出

定时器

• 说明：所谓定时器就是在指定的时间做指定的事情
• 分类：
  • 一次性定时器：设置一个时间，时间一到，做指定的事情，之后就销毁了。
    • 设置：var timer = setTimeout(函数,时间)，时间单位是毫秒
    • 清除定时器：clearTimeout(timer)
  • 周期性定时器：设置一个时间间隔，时间一到，做指定的事情，然后重新计时
    • 设置：var timer = setInterval(函数,时间)，时间单位是毫秒
    • 清除：clearInterval(timer)

获取样式

• 兼容获取方式

  var oDiv=document.getElementsByTagName('div')[0]
          //这种方式只能获取行内样式
          //alert(oDiv.style.width)
          //低级浏览器
          //alert(oDiv.currentStyle['width'])
          //高级浏览器
          //alert(getComputedStyle(oDiv,null)['width'])
          alert(getStyle(oDiv,'width'))
          
          //封装兼容获取样式的方法
          function getStyle(obj,attr)
          {
              if (typeof(obj.currentStyle)=='undefined'){
                  return getComputedStyle(obj,null)[attr]
              }else{
                  return obj.currentStyle[attr]
              }
          }

   

window对象

• 时间：

  • onload：页面加载完成（包括资源）

  • onscroll：页面滚动

  • onresize：窗口尺寸发生改变

• 属性：

  • innerWidth：宽度，innerHeight：高度；包括滚动条

  • document：文档对象

    • document.documentElement.clientWidth：净宽度

    • document.documentElement.clientHeight：净高度

    • document.documentElement.scrollTop：向上滚动的距离

    • document.documentElement.scrollLeft：向左滚动的距离

    • 说明：以上是H5标准的获取方式，非H5标准需将documentElement改为body

效果展示

• 飘舞的小球

  • 完善：当鼠标放到小球上停止飘，离开后继续飘

查找元素

• 示例：

<script>
        var wtms=document.getElementById('wtms')
        //上一个同胞元素
        var prev=wtms.previousElementSibling||wtms.previousSibling
        //下一个同胞元素
        var next=wtms.nextElementSibling||wtms.nextSibling
        //父级元素
        var parent=wtms.parentNode
        //获取第一个子元素
        var first=parent.firstElementChild||parent.firstChild
        //获取最后一个子元素
        var last=parent.lastElementChild||parent.lastChild
        
        //在文档中连续查找
        var uncle=wtms.parentNode.nextElementSibling
        alert(uncle.innerText)
        
    </script>

创建与删除

• 创建元素：div=document.createElement('div')

• 添加元素：div.appendChild(button)

• 删除元素：grand.removeChild(parent)

事件冒泡

• 说明：当下层元素和上层元素支持同一事件，当上层事件触发时，下层事件也会触发，这种事件称为事件冒泡

• 取消事件冒泡：ev.cancelBubble=true

事件绑定

• 说明：一个事件触发时，想要同时调用多个处理函数，直接设置后面的覆盖前面的，可以通过事件绑定解决。

• 示例：

var div=document.getElementsByTagName('div')[0]
        //传统的方式不行（后面的设置会覆盖前面的）
//      div.οnclick=giveRed
//      dv.οnclick=giveGreen
​
        //添加事件绑定
//      div.addEventListener('click',giveRed,false)
//      div.addEventListener('click',giveGreen,false)
        
        addBind(div,'click',giveRed)
        addBind(div,'click',giveGreen)
        
        //移除事件绑定
//      div.removeEventListener('click',giveRed,false)
        delBind(div,'click',giveRed)
        
        
        function giveRed(){
            alert('红色')
        }
        
        function giveGreen(){
            alert('绿色')
        }
        
        //兼容绑定事件
        function addBind(obj,ev,func)
        {
            if(obj.addEventListener){
                //高级浏览器
                obj.addEventListener(ev,func,false)
            }else{
                //低级浏览器
                obj.attachEvent('on'+ev,func)
            }
        }
        //兼容取消绑定
        function delBind(obj,ev,func)
        {
            if(obj.removeEventListener){
                obj.removeEventListener(ev,func,false)
            }else{
                obj.DataContainerEvent('on'+ev,func)
            }
        }

事件源元素

• 说明：就是根据事件获取事件发生的元素，也就是该事件发生在哪个元素上。

• 示例：

function change(e)
        {
            var ev =e||event
            //根据事件获取发送的元素
            var obj=ev.srcElement
            //修改样式
            obj.style.background='green'
        }

点击位置

• 说明：点击事件触发时，鼠标距离窗口的偏移位置

• 示例：

function dian(e)
        {
            var ev=e||event
            //点击位置在窗口的座标
            console.log(ev.clientX+'x'+ev.clientY)
        }

键盘事件

• onkeydown：键盘按下事件

  • 按键的ASCII：ev.keyCode

  • 是否按下了特定的组合按钮

  if(ev.altKey==true){
                  console.log('您按下了alt键')
              }else if(ev.ctrlKey==true){
                  console.log('您按下了ctrl键')
              }else if(ev.shiftKey==true){
                  console.log('您按下了shift键')
              }

   

禁用右键

• 示例：

document.οncοntextmenu=function(){
            //返回false时即可禁用右键，菜单不会显示
            return false
        }

控制跳转

• 说明：a标签的onclick事件的返回值可以决定是否跳转，返回true可以跳转，返回false不能跳转

• 示例：

<a href="http://www.baidu.com" οnclick="return tiao()">百度一下</a>
​
<script type="text/javascript">
        function tiao(){
            //逻辑处理
            //返回false就无法跳转
            return false
        }
    </script>

各种弹框

• alert：警告框

• confirm：确认框，点击确定返回true，点击取消返回false

• prompt：输入框，点击确定返回输入内容，取消返回null

BOM操作

• 说明：将浏览器当做对象（window）一样进行操作，称为BOM操作

• 使用：

  • open：打开新页面

  • close：关闭使用JS创建的窗口

  • history：历史记录跳转

    • back：向后跳转一个页面

    • go：可以指定跳转，正数向前跳，负数向后跳

  • location：

    • href：指定当前窗口的url，修改它可以直接实现页面跳转