js操作bom和dom


Bom

  概念

    BOM : Browser Object Model 瀏覽器對象模型,描述與瀏覽器進行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM則無疑才是真正的核心。

    BOM提供了很多對象,用於訪問瀏覽器的功能,這些功能與任何網頁內容無關。

window對象

  窗口高度

   var  a  = window.innerheight

  窗口寬度

  var a = window。innerwidth

  打開一個新的頁面

  open (https://www.baidu.com/)

  關閉一個頁面

  在當前頁面輸入    close()  即可關閉

location對象

  獲取url

  location.href   (注意不需要加())

  轉到其他頁面

  location.href = "url"   其中url 是你要打開的頁面

  重新加載

  location.reload()

彈出框

  alret(“文本”)        警告框 只有確定

  confirm("文本")   當你點擊確定時返回true  當你點擊取消時返回 false

  prompt("提示語1","提示語2")     會彈出一個帶有input的框,當你再input框中輸入文本時,會被拿到

計時器(重點)

  計時器分為兩種

  第一種時隔多少秒做什么事情(只會執行一次),格式  var a = setTimeout(函數(js語句), 毫秒),其中必須時函數,1000毫秒等於一秒。一般來說都會定義一個變量來接受這個計時器,方便清除。

 
         
// setTimeout設置
var timer = setTimeout(function(){alert(123);}, 3000)

    

// 取消setTimeout設置
clearTimeout(timer);

    第二種是每隔多少秒進行一次(可以執行多次),格式類似setTimeout ,其中clearInterval(timer)返回的數值是計時器在cpu的地址

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);

 Dom

    概念:文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴展標志語言的標准編程接口。在網頁上,組織頁面(或文檔)的對象被組織在一個樹形結構中,用來表示文檔中對象的標准模型就稱為DOM。

    dom樹結構:

    

    查找對象

      直接查找有三種,主要是通過id,class,和標簽名字來獲取,其中id獲取到的是一個,其余兩個獲取的是數組。要拿到具體的值可以通過[“索引”]來取值。   

document.getElementById("文本文檔中的id")
document.getElementsByClassName("文本文檔中的屬性名")
document.getElementByTagName("文本文檔中的標簽名字")

      間接查找(通過直接查找找到一個具體的標簽,然后再通過間接查找找到想要的標簽)兒子標簽會將所有的兒子標簽拿到,並返回一個數組,父親標簽同理。

var a = document.getElementById("d1") 
var a1 = a.parentElemen // 父級標簽
var a2 =a.children//兒子標簽
var a3 = a.lastElementChild//最后一個兒子標簽
var a4 = a.firstElementChild//第一個兒子標簽
var a5 = a.nextElementSibling//下一個兄弟標簽
var a6 = a.previousElementSibling//上一個兄弟標簽

     創建節點

  其中括號里面的填寫是各個標簽的類型,可以通過.class的屬性名進行屬性設置。

var a = document.createElement("a");

      添加節點

            給父級標簽添加一個兒子標簽  格式 父級標簽 . appendChild(新建的標簽)

var a1 = document.getElementById("d1");
a1.appendChild(a);

     插入節點

      在a1的兒子標簽中,插入一個a標簽,位置再a2的前面  格式:父級標簽.insertBefore(新建的標簽,在誰的前面,兩個必須都是兒子標簽)

a1.insertBefore(a,a2)

     刪除節點

       刪除父級標簽下的某一個標簽 格式:父級標簽 . removeChild(要刪除的標簽)

a1.removeChild(a)

        替換節點

       替換父級標簽下的一個標簽  格式: 父級標簽 . replaceChild (新的標簽,要替換的標簽)

a1.replaceChild(a,a2)

        文本操作

        主要分innerHTML和innerText。兩個格式都是  標簽 .  innerText(innerHTML) = "要設置的文字"

        兩者的區別在於前者可以識別自己手寫的標簽內容,而后者只能寫純文本。同時都是將原先的內容替換掉

a.innerText = "<div>你好啊</div>"      //<div>你好啊</div>
a.innerHTML ="<div>你好啊</div>" // 你好啊

    attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比較規范的寫法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設置,如果是你自定義的屬性,是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="..."

 

    value操作 

      主要是用於拿到標簽的值 適用於1.input   2.select  3.textarea 

var a_text   =  a.value

     Class操作

className  獲取所有樣式類名(字符串)

首先獲取標簽對象

標簽對象.classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true,否則返回false
classList.toggle(cls)  存在就刪除,否則添加,toggle的意思是切換,有了就給你刪除,如果沒有就給你加一個

       css操作

      JS操作CSS屬性的規律:

      1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。

      2.對含有中橫線的CSS屬性,將中橫線后面的第一個字母換成大寫即可。

         事件 

      

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               // 練習:輸入框
onblur         元素失去焦點。               應用場景:用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景:通常用於表單元素,當元素內容被改變時觸發.(select聯動)

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊,使用的對象是form。

        綁定方式有兩種:

          第一種:不常用 函數中的ths是一個形參,可以隨便寫      

<div id = "i1" onclick="f1(this)">
    測試
</div>
<script>
    function f1(ths) {
        ths.style.backgroundColor = "red"//點擊之后背景色變成紅色

    }

          第二種:實現了css 與js的分離  比較常用

<div id = "i2">
    測試
</div>
<script>
var d2 = document.getElementById("i2")
    d2.onclick =function () {
        this.style.backgroundColor = "red"
    }
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM