DOM对html页面的操作

1.改变元素背景

document.body.style.background="url('./img/1.jpg') no-repeat"

2.改变图片地址

var img=document.querySelector("img");
img.src="./img/1.jpg";

3.改变元素里面的内容

var div=document.querySelector("div");  
   div.innerHtml="改变了div里的内容！";

DOM节点的操作思想

1.排他思想

<div>
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>

</div>

<script>
    var btns=document.querySelectorAll("button");
    for(var i=0;i<=btns.length;i++){
        btns[i].onclick=function(){
            //1.先让所有按钮变成统一的颜色
            for( var j=0;j<btns.length;j++){
                btns[j].style.color="black";
            }
            //2.让点击的按钮变成红色
            this.style.color="red";
        }
    }
</script>

2.setAttribute() 方法添加指定的属性，并为其赋指定的值。

  lilist.setAttribute("myindex",i)
  //给lilist添加了一个名字叫“myindex”的自定义属性，并赋值为i；

DOM中的常用事件(以btn按钮来进行举例)

点击事件onclick

btn.onclick=function(){
      console.log("这是一个点击事件！");
  }

三种点击方式的差别

 <!-- 第三种方式-->
<button id="btn" onclick="threeFn()">点我</button>

<script type="text/javascript">
    var btn = document.getElementById("btn");

    // 第一种 通过点击事件
    btn.onclick = function(){
        alert("这是第一种点击方式");
    }

    // 第二种 监听点击事件
    btn.addEventListener('click', function(){
        alert("这是第二中点击方式");
    })

    // 第三种 通过方法响应点击事件
    function threeFn(){
        alert("这是第三种点击方式");
    }
</script>      

移动事件

1.mouseover:鼠标滑过

2.mouseout:鼠标移出

3.mousemove:鼠标移动