JS基礎DOM一

事件

1.常見事件

  • onclick:點擊某個對象時調用
  • ondblclick:雙擊某個對象
  • onmouseover:鼠標移動到元素上
  • onmouseout:鼠標從某元素離開
  • onfocus:元素獲取焦點觸發
  • onblur:元素失去焦點觸發
  • oninput:文本輸入文字事件
  • onchange:文本的內容被改變
  • onload:當頁面加載完畢的時候觸發(文本和圖片)
  • onkeydown:鍵盤按鈕被按下
  • onkeyup:鍵盤按鈕被松開

2.事件綁定

  • 行內綁定
    <div id="box" onclick="fn()">
  • 帶名函數
         //帶名函數
        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.節點訪問

節點的訪問關系是以屬性形式存在的

    <div class="box1">
        <div class="box3"></div>
        <div class="box2">
            <div class="box5"></div>
        </div>
        <div class="box4"></div>
    </div>
  • 節點訪問
    //獲取父節點
    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.節點屬性

    <img src="" alt="" class="box" id="aaa" title="哈哈哈" width="200px" height="200px"/>
<button value="sss" >sssssss</button>

  //獲取屬性
  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 = "<h1>我變大了嗎</h1>";

  // innerText：獲取雙閉合標簽里面的內容(不識別標簽)
  console.log(document.getElementsByTagName("button")[0].innerText);
  document.getElementsByTagName("button")[0].innerText = "<h1>我變大了嗎</h1>"

5.節點類型

<div id="box">您好</div>

    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.表單屬性

  • 禁用文本框
<body>
賬號： <input type="text" id="acount"/><button>禁用</button><br/><br/>
密碼： <input type="password"/>
</body>


<script>
   var input = document.getElementById("acount");
   var btn = document.getElementsByTagName("button")[0];

    btn.onclick = function () {
      btn.innerHTML === "禁用" ? input.disabled = "no" : input.removeAttribute("disabled");//隨便寫字符串都行，只要不是空
      btn.innerHTML = btn.innerHTML === "禁用" ? "解禁" : "禁用";
    }
</script>
  • 文本獲取焦點
<body>
<div class="focus">
    京東：<input type="text"value="我是京東" id="input1"/><br/><br/>
    淘寶：<label for="input2">我是淘寶</label><input type="text" id="input2"/>
</div>
</body>


<script>
    var input_jd = document.getElementById("input1");
    var input_tb = document.getElementById("input2");

    //焦點觸發事件
    var jd_ph;
    input_jd.onfocus = function () {
      if (this.value = "我是京東"){
        jd_ph = this.value;
      }
      this.value = "";
    }
    //失去焦點觸發事件
    input_jd.onblur = function () {
      this.value = jd_ph;
    }


    //文字的輸入事件
    input_tb.oninput = function () {
      var label = input_tb.parentNode.children[3];
      label.style.display = this.value === "" ? "block" : "none";
    }

    //直接獲取焦點
    input_tb.focus();//一加載完成就會獲取焦點
</script>
  • 登錄注冊高亮顯示
<style type="text/css">
        .error {
            border: 1px solid red;
        }
        .right {
            border: 1px solid green;
        }
</style>
<body>
<div>
    賬號：<input type="text" onblur="jude(this)"/><br/><br/>
    密碼：<input type="password" onblur="jude(this)"/>
</div>
</body>


<script>
    function jude(inp) {
      //this代指的不是input，而是window，所以要把input傳遞進來
      console.log(this);
      if (inp.value.length < 6 || inp.value.length > 12){
            inp.className = "error";
      }else {
            inp.className = "right";
      }
    }
</script>
  • select屬性
<body>
<div>
    <button id="sel">識別水產</button>
    <br/><br/>
    <select name="" id="">
        <option value="0">香蕉</option>
        <option value="1">蘋果</option>
        <option value="2">鴨梨</option>
        <option value="3">鯉魚</option>
    </select>
</div>
</body>


<script>
    var sel_btn = document.getElementById("sel");
    var opt = document.getElementsByTagName("option")[3];
    sel_btn.onclick = function () {
      //選擇鯉魚
      opt.selected = "true";
    }
</script>
  • 單選框全選
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox"/>
                </th>
                <th>菜名</th>
                <th>飯店</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"/>
            </td>
            <td>地三鮮</td>
            <td>田老師</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>西紅柿炒雞蛋</td>
            <td>田老師</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>醋溜土豆絲</td>
            <td>田老師</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>蘿卜干炒黃豆兒</td>
            <td>田老師</td>
        </tr>
        </tbody>
    </table>
</body>
<script>
    //獲取input標簽
    var titleInput = document.getElementsByTagName("th")[0].children[0];
    var inputArray = document.getElementsByTagName("tbody")[0].getElementsByTagName("input");

    titleInput.onclick = function () {
        for (var i = 0;i < inputArray.length;i++){
          inputArray[i].checked = this.checked;
        }
    }


    for (var i = 0;i < inputArray.length;i++){
      inputArray[i].onclick = selFn;
    }

    function selFn() {
//        var bool = inputArray.every(function (item,index,array) {
//           return item.checked;
//        });//偽數組沒有數組的一些遍歷方法
      var bool = true;
      for (var i = 0;i < inputArray.length;i++){
        if (!inputArray[i].checked){
          bool = false;
          break;
        }
      }
        titleInput.checked = bool;
    }
</script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (續jQuery基礎(1)) 第5章 DOM節點的復制與替換 （1）DOM拷貝clone() 克隆節點是DOM的常...
    凜0_0閱讀 1,363評論 0贊 8
  • 第1章 鼠標事件 1-1 jQuery鼠標事件之click與dbclick事件 用交互操作中，最簡單直接的操作就是...
    mo默22閱讀 1,296評論 0贊 6
  • 總結： 鼠標事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,631評論 2贊 10
  • 事件流 IE和Netscape開發團隊提出了完全相反的兩種事件流的概念，事件冒泡流和事件捕獲流。 事件冒泡 事件由...
    exialym閱讀 984評論 0贊 9
  • 1 Claude Monet, I papaveri 莫奈：《亞嘉杜的罌粟花田》 Uno degli oli su...
    全歐小語種閱讀 571評論 0贊 0