前端笔记—第15篇js中的DOM操作
生活随笔
收集整理的這篇文章主要介紹了
前端笔记—第15篇js中的DOM操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
獲取事件源
- 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 復制代碼- 輸入框獲得焦點和失去焦點的
- 排他思想的使用:最好的解決方式就是閉包
- 判斷字符串的真實長度
- URL編碼
- 日期對象
- 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
- 獲取屏幕可視區域的寬度和高度,會隨著屏幕的寬度變化的
- offset家族
- 事件對象
- 避免選中問題:window.getSelection ? window.getSelection().removeAllRanges : document.selection.empty;兼容IE的寫法
- window.getSelection()獲取鼠標劃去部分的起始位置到結束位置,返回一個selection對象
- scroll家族
- 瀑布流布局
- 每一個小盒子的寬度是固定的,高度是不固定的
- 根據屏幕寬度和小盒子寬度計算出列數
- 設置父盒子居中顯示
- 計算出高度數組,遍歷所有子元素,更新高度數組
- HTML的 Doctype 作用 ? 嚴格模式與混雜模式如何區分?它們有何意義 ?
- 聲明位于文檔的最前面,處于html標簽之前,用來告訴瀏覽器的解析器,用什么文檔類型規范來解析這個文檔
- 嚴格模式的排版和js運作模式是以該瀏覽器支持的最高標準運行,在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
- DOCTYPE不存在或者格式錯誤,會導致頁面以混雜模式顯示
- border的基本使用注意事項:
- js異步編程的集中方式
- 回調函數
- 事件監聽
- 發布和訂閱:事件完全可以理解為信號,如果存在一個信號中心,某個事件任務完成就向信號中心發送一個信號,其他事件任務可以向信號中心訂閱者這個信號,從而知道什么時候自己可以開始執行,這種模式也叫作觀察者模式,或者發布/訂閱模式。
- Promise對象
轉載于:https://juejin.im/post/5c91dd415188252d5404ae08
總結
以上是生活随笔為你收集整理的前端笔记—第15篇js中的DOM操作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 绥化a货翡翠,拉萨a货翡翠
- 下一篇: 后缀数组(SA)备忘