javascript
JS标签选择器以及节点操作
JS的DOM開始當然是從選擇器開始的,小編這邊先做一個歸類。
一、DOM選擇器
document代表整個文檔這邊就省略他的開頭了
1. getElementById( )? ? ?//顯然是用作與獲取id來獲取標簽(實戰中不常用)
2.getElementByTagName( )? ? ?//通過標簽類型來獲取節點(常用)
3.getElementByClassName( )? ? //類名獲取
4.querySelector( )? ? ? ?//內部放的是可以跟css選擇器一樣的格式但選取的是靜態的(選取的那一刻之后更改了源頭這個還是不會變)
二、節點操作
網頁之中不可能所有的標簽都是用選擇器選出來的嘛那么小編這邊在介紹一下節點操作,節點分為元素節點和節點,節點包含文本之類的這邊也不做介紹,感興趣可以去看一下。
元素節點:
1.parentElement( )? ? ?//返回引用對象父節點
2.children( )? ? ? ? ? ? ? ?// 返回子元素節點集
3.firstElementChild / lastElementChild? ? ? ?//返回 第一 \ 最后 子元素節點
4.nextElementSibling / previousElementSibling? ? //返回上一個 / 下一個兄弟元素節點
上述都是基于對象選擇下面是一些基于文檔的增查刪改:
1.creatElement( )? ? //創建元素節點?
2.appendChild( )? ? ?//插入元素節點,插入順序跟數組方法push一樣,如果是操作頁面中本身有的屬性則相當于剪切
? ?insertBefore(a,b)? ? ? // 把a節點元素插到b前面
3.parent.removeChild()? ? //通過父級選取元素節點刪除
? ?child.remove( )? ? ? ? ? ?//刪除自身
4.parent.replaceChild(new , orgin)? ? ?//通過父級選擇替換? ??
節點的一些屬性:
1.nodeName? ? ? //節點名稱
2.nodeVaule? ? ? //文本節點內容可讀寫
3.nodeType? ? ? ?//文本屬性值(這邊羅列幾個常見的)
可以用作判斷。
4. innerHTML? ? ?//往對象標簽中添加內容,注意都是基于html文件的所以說在里面寫的內容相當于直接加到html文檔之中所以也?可以去寫一些標簽進去可以實現效果。
5. setAttribute(屬性名,屬性值)? ? ?// 我們通過這樣的方法可以給標簽加屬性,可以是自建屬性。
? ? getAttribute(屬性名)? ? ? ? //獲取屬性值
總結
以上是生活随笔為你收集整理的JS标签选择器以及节点操作的全部內容,希望文章能夠幫你解決所遇到的問題。