獲取事件源

• document.getElementById()
• document.getElementsByClass()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector()
• document.querySelectorAll()

獲取兄弟節點

//1.獲取下一個兄弟節點 var span = document.getElementById('span'); var nextNode = span.nextElementSibling || span.nextSibling;//兼容IE678 //2.獲取上一個兄弟節點 var previous = span.previousElementSibiling || span.previousSibling; //3.獲取第一個子節點 var firstChild = box.firstElementChild || box.firstChild; //4.獲取最后一個子節點 var lastChild = box.lastElementChild || box.lastChild; //5.獲取多個子節點的方法 var child = box.childNodes;//注意此時拿到的還有別的節點，如文本節點，注釋節點，標簽節點，而我們最想要的就是標簽節點 var newList = []; for(var i = 0; i < child.length; i++){var node = child[i];if(node.nodeType === 1 ){//元素節點的類型為1，其余的查文檔就可以了newList.push(node);} } //6.通過非w3c標準的方法獲取 var child = box.children;//注意點在IE678中會拿到注釋節點的，但是在高版本的瀏覽器中只會拿到標簽節點 //7.獲取任意的兄弟節點 var child1 = box.parentNode.children[0]; var child3 = box.parentNode.children[3]; 復制代碼

DOM節點的操作

var box = document.getElementById('box'); //1.創建DOM節點 var span = document.createElement('span'); //2.添加屬性 span.class = 'span1' span.setAttribute('class','span1'); span.getAttribute('class');//獲取節點屬性 //3.插入到指定的位置 box.appendChild(span);//默認是插入插入到指定元素的最后的 box.insetBefore(插入元素，指定元素) //4.刪除節點 box.parentNode.removeChild(span); span.remove(); //5.節點屬性的設置，獲取，刪除 //6.復制節點 var newTag = box.cloneNode(false);//設置為false的時候是淺拷貝，如果設置為true的時候是深拷貝 復制代碼

獲取標簽的內容

var box = document.getElementById(box); //獲取標簽內的所有內容包括文本和標簽 box.innerHTML(); //獲取標簽內的文本內容 box.innerText(); //獲取單閉合標簽的值 box.value 復制代碼

• 輸入框獲得焦點和失去焦點的

var name = document.getElementbyId('box'); name.onfocus = function(){};//輸入框或的焦點 name.onblur = function(){};//輸入框失去焦點 name.onchange = function(){};//可以理解為輸入框失去焦點而且value發生變化的時候觸發該事件 復制代碼

• 排他思想的使用：最好的解決方式就是閉包
• 判斷字符串的真實長度

var str = 'hello,世界'; function strLen(str){var len = 0;var Str = str.length;var code = 0;for(var i = 0; i < Str; i++){code = str.charCodeAt(i);//表示放回字符串的i+1為字符的Unicode編碼if(code > 0 && code <= 127){len += 1;}else{len += 2;}}return len; } console.log(strLen(str)); 復制代碼

• URL編碼

// 編碼過程// encodeURI:用于轉碼整個URL，它會將元字符和語義字符之外的字符都進行轉義encodeURI('http://www.example.com/q=春節') // "http://www.example.com/q=%E6%98%A5%E8%8A%82"// encodeURIComponent:會轉碼除了語義字符之外的所有字符，包括元字符encodeURIComponent('http://www.example.com/q=春節') // "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82" // 解碼過程 // decodeURI() // decodeURIComponent() 復制代碼

• 日期對象
  • getTime():返回實例距離1970年1月1日00:00:00的毫秒數
  • getDate():返回每個月的幾號，從1開始
  • getDay(): 返回每周的星期幾取值為：0-6
  • getFullYear(): 返回四位數的年份
  • getMonth(): 返回月份取值為0-11
  • getHours(): 返回小時，取值為0-23
  • getMinutes(): 返回分鐘0-59
  • getSeconds(): 返回秒數 0-59
  • getMilliSeconds: 返回毫秒數，取值為：0-999
• 獲取屏幕可視區域的寬度和高度，會隨著屏幕的寬度變化的

// IE6+支持的屬性 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight;// IE9+支持的屬性 var screenW = window.innerWidth; var screenH = window.INnweHeight;// 低版本的Chrome支持的屬性var screenW = document.body.clientWidth;var scrrenH = document.body.clientHeigt; 復制代碼

• offset家族

// offset獲取元素的寬度和高度 // offset = 邊框 + 內邊距 + 內容；是不包括外邊距的 // offsetWidth和style.width之間的區別： // 1.style.width只能獲取到寫在行內的樣式，如果是寫在style中的是獲取不到的,只包含內容的區域，不包含邊框和內邊距的距離 // 2.offsetWidth獲取到的是number類型的，style.width獲取到的是string類型的 // 3.offsetWidth是只讀屬性是不能改變盒子大小的，而style.width是可以改變盒子大小的 // 4.offsetWidth是可以獲取到行內的樣式也是可以獲取到樣式表中的樣式// offsetLeft和offsetTop offsetLeft: 獲取距離定位父盒子左邊的距離，如果沒有定位屬性獲取到的是距離body的距離 offsetTop: 獲取距離定位父盒子上邊的距離 offsetParent: 返回盒子帶有定位屬性的父級標簽，可能是父親標簽也可能是爺爺標簽 復制代碼

• 事件對象

// 1. 兼容寫法： var e = event || window.event; // 2. e.screenX || e.screenY 獲取光標距離電腦屏幕左邊和上邊的距離 // 3. e.pageX || e.pageY 獲取光標點擊位置距離瀏覽器頁面左邊和上邊的距離包括被卷進去的頁面尺寸 // 4. e.clientX || e.clientY 獲取光標點擊位置距離瀏覽器的寬度和高度 // 5. e.target: 該事件被傳送到的位置，例如點擊div拿到的值就是div標簽 // 6. e.type: 獲取到的是事件的類型 復制代碼

• 避免選中問題：window.getSelection ? window.getSelection().removeAllRanges : document.selection.empty;兼容IE的寫法
• window.getSelection()獲取鼠標劃去部分的起始位置到結束位置，返回一個selection對象
• scroll家族

// 1.IE9+和最新的瀏覽器 window.pageXOffset;(scrollLeft) window.pageYOffset;(scrollRight) // 2.Firefox瀏覽器 document.documentElement.scrollTop; document.documentElement.scrollLeft; // 3.chrome瀏覽器 document.body.scrolltTop; document.body.scrollLeft； // 封裝獲取的頭部滾動距離和左邊滾動距離 function scroll(){if(window.pageXOffset !== null){//IE9+和最新的瀏覽器return {left: window.pageXOffset;top: window.pageYOffset;}}else if(document.compatMode === 'CSS1Compat'){//IE678return {left: document.documentElement.scrollLeft;top: document.documentElement.scrollTop;}}else{//未聲明DTD模式的瀏覽器return {left: document.body.scrollLeft;top: document.body.scrollTop;}} } 復制代碼

• 瀑布流布局
  • 每一個小盒子的寬度是固定的，高度是不固定的
  • 根據屏幕寬度和小盒子寬度計算出列數
  • 設置父盒子居中顯示
  • 計算出高度數組，遍歷所有子元素，更新高度數組
• HTML的 Doctype 作用 ? 嚴格模式與混雜模式如何區分？它們有何意義 ?
  • 聲明位于文檔的最前面，處于html標簽之前，用來告訴瀏覽器的解析器，用什么文檔類型規范來解析這個文檔
  • 嚴格模式的排版和js運作模式是以該瀏覽器支持的最高標準運行，在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
  • DOCTYPE不存在或者格式錯誤，會導致頁面以混雜模式顯示
• border的基本使用注意事項：

// html <div id="demo"></div> // css <style>#demo{width: 100px;height: 100px;background-color: #fff;border: 2px solid #000;position: relative;}#demo:after, #demo:before{border: solid transparent;content: '';height: 0;width: 0;position: absolute;left: 100%;}#demo:after {border-width: 10px;border-left-color: #fff;// 注意這地方只是給邊框的左邊設置了顏色top: 20px;}#demo:before {border-width: 12px;border-left-color: #000;top: 18px;} </style> 復制代碼

• js異步編程的集中方式
  • 回調函數
  • 事件監聽
  • 發布和訂閱：事件完全可以理解為信號，如果存在一個信號中心，某個事件任務完成就向信號中心發送一個信號，其他事件任務可以向信號中心訂閱者這個信號，從而知道什么時候自己可以開始執行，這種模式也叫作觀察者模式，或者發布/訂閱模式。
  • Promise對象

轉載于:https://juejin.im/post/5c91dd415188252d5404ae08

總結

以上是生活随笔為你收集整理的前端笔记—第15篇js中的DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。