JS原生DOM基本操作（上）

一.擷取元素

1.根據id名稱擷取元素

文法：document.getElementById(‘id名稱’)

作用：擷取文檔流中id對應的一個元素

傳回值：

• 如果有id對應的元素，就是這個元素
• 如果沒有id對應的元素，就是null

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根據id擷取元素指派給a
        var a=document.getElementById('container')
        console.log(a)
    </script>
           

2.根據元素類名擷取元素

文法：document.getElementsByClassName(‘元素類名’)

作用：擷取文檔流中所有類名對應的元素

傳回值：必然是一個僞數組

• 如果有類名對應的元素，有多少擷取多少
• 如果沒有對應的元素，空的僞數組

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根據class擷取元素指派給a
        var a=document.getElementsByClassName('box')
        console.log(a)
    </script>
           

3.根據标簽名擷取元素

文法：document.getElementsByTagName(‘标簽名’)

作用：擷取文檔流中所有标簽名對應的元素

傳回值：必然是一個僞數組

• 如果有類名對應的元素，有多少擷取多少
• 如果沒有對應的元素，空的僞數組

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根據标簽名擷取元素指派給a
        var a=document.getElementsByTagName('div')
        console.log(a)
    </script>
           

4.根據選擇器擷取元素

文法：document.querySelector(‘選擇器’)

作用：擷取文檔流中滿足選擇器規則的第一個元素

傳回值：

• 如果有選擇器對應的元素，擷取到第一個
• 如果沒有選擇器對應的元素，就是null

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根據選擇器擷取元素指派給a
        var a=document.querySelector('div')
        console.log(a)
    </script>
           

5.通過選擇器擷取一組元素

文法：document.querySelectorAll(‘選擇器’)

作用：擷取文檔流中所有滿足選擇器規則的元素

傳回值：必然是一個僞數組

• 如果有類名對應的元素，有多少擷取多少
• 如果沒有對應的元素，空的僞數組

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根據選擇器擷取元素指派給a
        var a=document.querySelectorAll('.box')
        console.log(a)
    </script>
           

以上就是js擷取元素的5種方法

擷取完元素，接下來就可以對元素進行一些操作了

二.操作元素内容

1.操作元素文本内容

• 擷取：元素.innerText
• 設定：元素.innerText=‘新内容’

<button>操作</button>
    <div>
        <p>文本内容</p>
    </div>

    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //擷取元素的文本内容
        console.log(ele.innerText)
        //給按鈕綁定點選事件
        btn.onclick=function(){
            //改變元素的文本内容
            ele.innerText='改變後的内容'
        }
    </script>
           

2.操作元素超文本内容

• 擷取：元素.innerHTML
• 設定：元素.innerHTML=‘新内容’

<button>操作</button>
    <div>
        <p>文本内容</p>
    </div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //擷取元素的文本内容
        console.log(ele.innerHTML)
        //給按鈕綁定點選事件
        btn.onclick=function(){
            //改變元素的文本内容
            ele.innerHTML='<span>改變後的内容</span>'
        }
    </script>
           

三.操作元素屬性

1.原生屬性

• 擷取：元素.屬性名
• 設定：元素.屬性名=‘屬性值’

屬性名

<button>操作</button>
    <div id="box">div标簽</div>
    <input type="password">
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //擷取元素屬性
        console.log(box.id)
        console.log(inp.type)
    </script>
           

設定

<button>操作</button>
    <div id="box">div标簽</div>
    <input type="password">
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //給元素綁定點選事件
        btn.onclick=function(){
            //修改元素屬性
            box.id='screen'
            inp.type='checkbox'
        }
    </script>
           

2.自定義屬性

• 擷取：元素.getAttribute(‘屬性名’)
• 修改：元素.setAttribute(‘屬性名’,‘屬性值’)
• 删除：元素.removeAttribute('屬性名’)

擷取

<button>操作</button>
    <div id="box">div标簽</div>
    <input type="password" hello="world">
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //擷取元素自定義屬性
        console.log(inp.getAttribute('type'))
        console.log(inp.getAttribute('hello'))
    </script>
           

修改

<button>操作</button>
    <div id="box">div标簽</div>
    <input type="password" hello="world">
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //綁定點選事件
        btn.onclick=function(){
            //修改自定義屬性
            inp.setAttribute('hello','你好')
        }
    </script>
           

删除

<button>操作</button>
    <div id="box">div标簽</div>
    <input type="password" hello="world">
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //綁定點選事件
        btn.onclick=function(){
            //删除自定義屬性
            inp.removeAttribute('hello')
        }
    </script>
           

四.操作元素類名

• 擷取：元素.className
• 設定：元素.className=‘新内容’

擷取

<button>操作</button>
    <div class="content">div标簽</div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //擷取類名
        console.log(box.className)
    </script>
           

設定

<button>操作</button>
    <div class="content">div标簽</div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //綁定點選事件
        btn.onclick=function(){
            //修改類名
            box.className='screen'
        }
    </script>
           

五.操作元素行類樣式

• 擷取：元素.style.樣式名
• 設定：元素.style.樣式名=‘樣式值’

擷取

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标簽</div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //擷取樣式
        console.log(box.style.width)
        console.log(box.style.height)
        console.log(box.style.backgroundColor)
    </script>           

設定

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标簽</div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //綁定點選事件
        btn.onclick=function(){
            //修改樣式
            box.style.backgroundColor='red'
        }
    </script>           

六.擷取元素非行内樣式

• 擷取：window.getComputedStyle(元素).樣式名

ps:可擷取行内樣式，也可取非行内樣式，不能設定非行内樣式

擷取

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标簽</div>
    <script>
        //擷取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //擷取非行内樣式
        console.log(window.getComputedStyle(box).height)
    </script>