JS中DOM元素的操作

一、DOM元素的获取
1）document.getElementsByClassName ( “class”)
返回集 htmlcollection ,用法和数组一致
说明: class为DOM元素上class属性的值
2）document.getElementById( “id” )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
3)document.getElementsByName(" name");
返回的是nodelist 类型, 用法和数组一致
说明: name为DOM元素上name属性的值
4)document.getElementsByTagName(“TagName”);
返回的是htmlcollection 集合 , 用法和数组一致
5) document.querySelector(".btnlist");
返回的是集合
document.querySelectorAll("#btn");
获取所有的#btn
6)document.body
可以直接获取body

    
    


点我一下
点我一下

1:修改属性
语法: ele.style.syleName=styleValue
功能：设置ele元素的CSS样式
2.获取对象的属性
console.log(btn1[0].style.height); //40px
3.js获取非行内样式属性
console.log(window.getComputedStyle(btn1[0]).width);

    
    
    


点我

innerHTML
语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容）
语法: ele.innerHTML=" html”
功能:设置ele元素开始和结束标签之间的HTML内容为html说明：
注：
不能使用”-”连字符形式font-size
使用驼峰命名形式：fontSize
className
语法: ele.className
功能:返回ele元素的class属性
注：
1.className是重新设置类，替换元素本身的class
2.如果元素有2个以上的class属性值,那么获取这个元素的className属性时,会将它的class属性值都打印出来

    
    
    



    元素


    
前端开发
    
java开发
    
UI设计师

DOM属性设置与获取
获取属性
语法: ele.getAttribute( “attribute” )
功能:获取ele元素的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要获取的html属性（如：id 、type）

设置属性
语法: ele.setAttribute(”attribute”,value)
功能:在ele元素上设置属性
说明:
1、ele是 要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
删除属性
语法: ele.removeAttribute(”attribute" )
功能:删除ele,上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称

    
    


    
文本
    
    

Dom的HTML事件
HTML事件
直接在HTML元素标签内添加事件,执行脚本。
语法:
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用。

    
    
    


    
    ；
       
    

        开始
    

        结束

DOM的鼠标事件

• onload :页面加载时触发

• onclick :鼠标点击时触发

• onmouseover :鼠标滑过时触发

• onmouseout :鼠标离开时触发

• onfocus :获得焦点时触发 ,事件用于：
  input标签type为text、password; textarea;

• onblur :失去焦点时触发

• onchange：域的内容改变时发生，一般作用于select或checkbox或radio

• onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。

• onmousedown : 鼠标按钮在元素上按下时触发.

• onmousemove :在鼠标指针移动时发生

• onmouseup :在元素上松开鼠标按钮时触发

关于this指向
在事件触发的函数中, this是对该DOM对象的引用。
键盘事件

• onkeydown(键盘按下)

• onkeyup(键盘抬起)

• onkeypress(按键事件)

  document.body.onkeypress = function () {
        var e = window.event;
        console.log(e.keyCode);

//鼠标移动时，body的位置
document.body.onmousemove = function (e) {
  var pageX = e.pageX || e.clientX;
      var pageY = e.pageY || e.clientY;
       console.log(pageX,pageY);
    }

表单事件

• onfocus(获得焦点)

• onblur（失去焦点）

浏览器事件
window事件 ：

• onload（加载完成事件）
• onerror（报错事件）
• onresize :当调整浏览器窗口的大小时触发
• onscroll :(滑动事件)拖动滚动条滚动时触发

触屏事件
touch（触屏）
touchstart （开始触屏 ）
touchmove（触屏移动）
touchend(触屏结束)

如何给dom元素添加事件**
1.常规添加 直接在标签上添加事件

    
    


按钮1
按钮2
按钮3

**事件的执行参数 **
执行参数可以写在函数的形参 也可以直接window.event
this指代当前事件的执行对象
target srcElement 当前点击的目标元素

  var btn = document.getElementById("btn");
    btn.onclick = function (e) {
 var target = e.target || e.srcElement;
        console.log(target);//目标元素
        }

元素的横坐标：e.pageX || e.clientX;
元素的纵坐标：e.pageY || e.clientY;

// 获取鼠标移动是Body的坐标

document.body.onmousemove = function (e) {
   var pageX = e.pageX || e.clientX;
    var pageY = e.pageY || e.clientY;
       console.log(pageX,pageY);
    }

js里面的this

1. this–可以指代当前事件的执行对象
2. .this–函数里面的this对象指代当前的window对象

  showname();
    function showname() {
        console.log(this);
    }

Js事件的冒泡：给子元素和父元素添加同样的事件，会发生事件冒泡
处理方法：给子元素添加（开发中常用）
法1：e.stopPropagation ();//阻止事件冒泡；用于JS
法2：e.preventDefault ();//阻止默认事件；
法3： return false;//阻止冒泡，用于JQ;
事件的委托
target:事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

 var meunul=document.getElementById("menu");
  meunul.onclick=function(b){
      var target= b.target|| b.srcElement ; 
//      console.log(target.nodeName); //LI
      if(target.nodeName.toLowerCase() =="li"){
          console.log(521);
          console.log(521);
          console.log(521);
      }
  }

     按钮