<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js之操作DOM</title>
</head>
<body>
<!--
增
1. 新增節點
createElement(tagName)
createTextNode(str)
2. 插入節點（插入到頁面）
append()
insertBefore(newNode, target)
innerHTML 替換節點內的內容（可能包含標籤）
innerText 替換節點內的文本
刪
刪除節點
remove() 刪除當前節點
removeChild(node) 刪除當前節點下面的某個子節點
刪除節點身上的屬性
classList.add() 爲當前元素新增class類名
classList.remove() 爲當前元素刪除class類名
classList.contains() 判斷當前元素是否包含某個class類名
removeAttribute() 刪除當前元素的某個屬性
查
獲取元素的方法：(直接獲取元素)
getElementById('xxx')
getElementsByClassName()
getElementsByTagName('div')
getElementsByName('name')
querySelector()
querySelectorAll()
間接獲取元素：
previousElementSibling 上一個元素兄弟節點（在元素節點當中找）
previousSibling 上一個兄弟節點（在所有的節點類型當中找）
nextSibling 下一個兄弟節點
nextElementSibling 下一個元素兄弟節點
firstChild 獲取第一個子節點（在所有的節點類型當中）
lastChild 獲取最後一個子節點
children 獲取所有的元素節點
childNodes 獲取下面的所有子節點
獲取元素身上的屬性
dataset 獲取當前元素身上的屬性名結構爲data-的屬性
getAttribute() 獲取當前元素身上的某個屬性值
改
替換節點
parentNode.replaceChild(newNode, oldChild) 替換子節點
修改元素身上的某個屬性 或者元素裏面的內容
setAttribute('test', '333') 設置元素身上的某個屬性及其屬性值
className = 'xxx' 設置元素身上的class類名
特性， 自標籤存在就有的屬性
屬性 標籤身上的屬性 是可以手動添加
-->
<!-- ul.wrapper>li.item.item${$}*4 -->
<ul class="wrapper">
<li class="item item1" data-index=1 data-id="id" data-sex="男" aaa="xxx">1</li>
<li class="item item2">2</li>
<li class="item item3">3</li>
<li class="item item4">4</li>
<li class="item item5">5</li>
</ul>
<script>
// var item2 = document.getElementsByClassName('item2')[0];
// var oUl = document.getElementsByClassName('wrapper')[0];
// // console.log(oUl.children)
// var oLi = document.createElement('li');
// oLi.innerText = 12
// // var text = document.createTextNode('text')
// // // oUl.append(text)
// // oUl.insertBefore(text, item2)
// item2.innerText = 'xxxxxxxxxxxxxx'
// // item5.innerHTML = '<a href="#">xxxxx</a>'
// oUl.appendChild(oLi)
var item1 = document.getElementsByClassName('item1')[0];
var oUl = document.getElementsByClassName('wrapper')[0];
var oDiv = document.createElement('div');
oDiv.innerText = '我是新的元素'
// item1.remove()
// oUl.removeChild(item1)
// console.log(item1.getAttribute('aaa'))
// console.log(item1.dataset)
// item1.classList.add('xxxx')
// item1.removeAttribute('data-index')
// oUl.replaceChild(oDiv, item1)
item1.setAttribute('data-id', '333')
//
item1.id = 'item1'
item1.classList.add('new-class');
item1.classList.remove('item');
console.log(item1.classList.contains('item'))
</script>
</body>
</html>
js之操作DOM
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章