JS基礎(chǔ)DOM一

事件

1.常見事件

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

2.事件綁定

  • 行內(nèi)綁定
    <div id="box" onclick="fn()">
  • 帶名函數(shù)
         //帶名函數(shù)
        var div = document.getElementById("box");
        div.onclick = fn;
        function fn() {
          alert(123);
        }
  • 匿名函數(shù)
        //匿名函數(shù)
        var div = document.getElementById("box");
        div.onclick = function () {
         alert(123);
          div.style.width = "200px";
        };

        //頁面加載完畢的時(shí)候出發(fā)這個(gè)事件(文本和圖片)
        //整個(gè)頁面上所有的元素加載完成才會出發(fā)這個(gè)事件
        //window.onload可以預(yù)防使用標(biāo)簽再定義標(biāo)簽之前
        window.onload = function () {
          alert(1);
        }

3.節(jié)點(diǎn)訪問

節(jié)點(diǎn)的訪問關(guān)系是以屬性形式存在的

    <div class="box1">
        <div class="box3"></div>
        <div class="box2">
            <div class="box5"></div>
        </div>
        <div class="box4"></div>
    </div>
  • 節(jié)點(diǎn)訪問
    //獲取父節(jié)點(diǎn)
    var box2 = document.getElementsByClassName("box2")[0];
    console.log(box2.parentNode);//打印的是box1

    //兄弟節(jié)點(diǎn)

    //下一個(gè)兄弟節(jié)點(diǎn)
    console.log(box2.nextElementSibling || box2.nextSibling);//兼容寫法，nextSibling只支持ie678
    //前一個(gè)兄弟節(jié)點(diǎn)
    console.log(box2.previousElementSibling || box2.previousSibling);


    //子節(jié)點(diǎn)
    console.log(box2.firstElementChild || box2.firstChild);//第一個(gè)子節(jié)點(diǎn)
    console.log(box2.lastElementChild || box2.lastChild);//最后一個(gè)子節(jié)點(diǎn)

    //所有子節(jié)點(diǎn)
    console.log(box2.parentNode.children);//正常返回
    console.log(box2.parentNode.childNodes);//把空格和換行也算成節(jié)點(diǎn)，所以里面有7個(gè)元素
  • 節(jié)點(diǎn)操作
    //創(chuàng)建節(jié)點(diǎn)
    var div1 = document.createElement("div1");
    var div2 = document.createElement("div2");

    //插入節(jié)點(diǎn)
    box2.parentNode.appendChild(div1);//在最后插入節(jié)點(diǎn)
    box2.parentNode.insertBefore(div2,div1);//兩個(gè)參數(shù)前一個(gè)是要插入的節(jié)點(diǎn)，第二個(gè)是要在哪個(gè)節(jié)點(diǎn)前插入

    //刪除節(jié)點(diǎn)
    div1.parentNode.removeChild(div1);//刪除節(jié)點(diǎn)，也算是把自己刪除了


    //克隆節(jié)點(diǎn)
    var div3 = div2.cloneNode(false);
   box2.parentNode.insertBefore(div3,div2);//參數(shù)是bool，true把所有子節(jié)點(diǎn)也復(fù)制了，false只是復(fù)制一個(gè)節(jié)點(diǎn)

4.節(jié)點(diǎn)屬性

    <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"]);

  //設(shè)置屬性
  img.setAttribute("title","ttttt");//可以設(shè)置沒有的屬性
  img.title = "哦哦哦";
  img["alt"] = "300";


//  重點(diǎn)：這三種方法不能交替使用，賦值和取值必須用同一種犯法

  //刪除屬性
  img.removeAttribute("width");

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

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

5.節(jié)點(diǎn)類型

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

    var  div = document.getElementById("box");//獲取元素節(jié)點(diǎn)
    var att = div.getAttributeNode("id");//獲取屬性節(jié)點(diǎn)
    var  text = div.firstChild;//文本節(jié)點(diǎn)

    console.log(div);//div整體標(biāo)簽
    console.log(att);//id = "box"
    console.log(text);
    //nodeType節(jié)點(diǎn)類型
    console.log(div.nodeType);//1元素節(jié)點(diǎn)
    console.log(att.nodeType);//2屬性節(jié)點(diǎn)
    console.log(text.nodeType);//3文本節(jié)點(diǎn)

     //nodeName節(jié)點(diǎn)名字
    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>
  • 文本獲取焦點(diǎn)
<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");

    //焦點(diǎn)觸發(fā)事件
    var jd_ph;
    input_jd.onfocus = function () {
      if (this.value = "我是京東"){
        jd_ph = this.value;
      }
      this.value = "";
    }
    //失去焦點(diǎn)觸發(fā)事件
    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";
    }

    //直接獲取焦點(diǎn)
    input_tb.focus();//一加載完成就會獲取焦點(diǎn)
</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傳遞進(jìn)來
      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">識別水產(chǎn)</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標(biāo)簽
    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;
//        });//偽數(shù)組沒有數(shù)組的一些遍歷方法
      var bool = true;
      for (var i = 0;i < inputArray.length;i++){
        if (!inputArray[i].checked){
          bool = false;
          break;
        }
      }
        titleInput.checked = bool;
    }
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容