JS基础DOM一

事件

1.常见事件

• onclick:点击某个对象时调用
• ondblclick:双击某个对象
• onmouseover:鼠标移动到元素上
• onmouseout:鼠标从某元素离开
• onfocus:元素获取焦点触发
• onblur:元素失去焦点触发
• oninput:文本输入文字事件
• onchange:文本的内容被改变
• onload:当页面加载完毕的时候触发(文本和图片)
• onkeydown:键盘按钮被按下
• onkeyup:键盘按钮被松开

2.事件绑定

• 行内绑定

• 带名函数

         //带名函数
        var div = document.getElementById("box");
        div.onclick = fn;
        function fn() {
          alert(123);
        }

• 匿名函数

        //匿名函数
        var div = document.getElementById("box");
        div.onclick = function () {
         alert(123);
          div.style.width = "200px";
        };

        //页面加载完毕的时候出发这个事件(文本和图片)
        //整个页面上所有的元素加载完成才会出发这个事件
        //window.onload可以预防使用标签再定义标签之前
        window.onload = function () {
          alert(1);
        }

3.节点访问

节点的访问关系是以属性形式存在的

• 节点访问

    //获取父节点
    var box2 = document.getElementsByClassName("box2")[0];
    console.log(box2.parentNode);//打印的是box1

    //兄弟节点

    //下一个兄弟节点
    console.log(box2.nextElementSibling || box2.nextSibling);//兼容写法，nextSibling只支持ie678
    //前一个兄弟节点
    console.log(box2.previousElementSibling || box2.previousSibling);


    //子节点
    console.log(box2.firstElementChild || box2.firstChild);//第一个子节点
    console.log(box2.lastElementChild || box2.lastChild);//最后一个子节点

    //所有子节点
    console.log(box2.parentNode.children);//正常返回
    console.log(box2.parentNode.childNodes);//把空格和换行也算成节点，所以里面有7个元素

• 节点操作

    //创建节点
    var div1 = document.createElement("div1");
    var div2 = document.createElement("div2");

    //插入节点
    box2.parentNode.appendChild(div1);//在最后插入节点
    box2.parentNode.insertBefore(div2,div1);//两个参数前一个是要插入的节点，第二个是要在哪个节点前插入

    //删除节点
    div1.parentNode.removeChild(div1);//删除节点，也算是把自己删除了


    //克隆节点
    var div3 = div2.cloneNode(false);
   box2.parentNode.insertBefore(div3,div2);//参数是bool，true把所有子节点也复制了，false只是复制一个节点

4.节点属性

    
sssssss

  //获取属性
  var img = document.getElementById("aaa");
  console.log(img.getAttribute("class")) ;
  console.log(img.title);
  console.log(img["width"]);

  //设置属性
  img.setAttribute("title","ttttt");//可以设置没有的属性
  img.title = "哦哦哦";
  img["alt"] = "300";


//  重点：这三种方法不能交替使用，赋值和取值必须用同一种犯法

  //删除属性
  img.removeAttribute("width");

  // innerHTML：获取双闭合标签里面的内容(识别标签)
  console.log(document.getElementsByTagName("button")[0].innerHTML);
  document.getElementsByTagName("button")[0].innerHTML = "
我变大了吗
";

  // innerText：获取双闭合标签里面的内容(不识别标签)
  console.log(document.getElementsByTagName("button")[0].innerText);
  document.getElementsByTagName("button")[0].innerText = "
我变大了吗
"

5.节点类型

您好

    var  div = document.getElementById("box");//获取元素节点
    var att = div.getAttributeNode("id");//获取属性节点
    var  text = div.firstChild;//文本节点

    console.log(div);//div整体标签
    console.log(att);//id = "box"
    console.log(text);
    //nodeType节点类型
    console.log(div.nodeType);//1元素节点
    console.log(att.nodeType);//2属性节点
    console.log(text.nodeType);//3文本节点

     //nodeName节点名字
    console.log(div.nodeName);//div
    console.log(att.nodeName);//box
    console.log(text.nodeName);//#text

    //nodeValue属性值
    console.log(div.nodeValue);//null，元素是没有属性值的
    console.log(att.nodeValue);//box
    console.log(text.nodeValue);//您好

6.表单属性

• 禁用文本框

账号： 禁用


密码： 

• 文本获取焦点

    京东：


    淘宝：我是淘宝

• 登录注册高亮显示

    账号：


    密码：

• select属性

    识别水产
    


    
        香蕉
        苹果
        鸭梨
        鲤鱼
    

• 单选框全选

    

        

            

                

                    
                
                
菜名
                
饭店
            
        
        

        

            

            
            
地三鲜
            
田老师
        
        

            

                
            
            
西红柿炒鸡蛋
            
田老师
        
        

            

                
            
            
醋溜土豆丝
            
田老师
        
        

            

                
            
            
萝卜干炒黄豆儿
            
田老师