js基礎--Dom操作
阿新 • • 發佈:2018-07-20
rem name move nts 樣式 text ren sibling innertext 1.直接查找元素
document.getElementById #根據ID獲取一個標簽
document.getElementsByName #根據name屬性獲取標簽集合
document.getElementsByClassName #根據class屬性獲取標簽集合
document.getElementsByTagName #根據標簽名獲取標簽集合
2.間接查找元素
parentElement # 父節點標簽元素 children # 所有子標簽 firstElementChild # 第一個子標簽元素 lastElementChild # 最後一個子標簽元素 nextElementtSibling # 下一個兄弟標簽元素 previousElementSibling # 上一個兄弟標簽元素
3.操作DOM
3.1 innerText修改標簽頁面上的內容
<div id="d1">d1</div>
<script>
var tag=document.getElementById(‘d1‘);
var content=tag.innerText;
console.log(content);
</script>
3.2className修改標簽的class樣式
<div id="d1" class="c1">d1</div> <script> var tag=document.getElementById(‘d1‘); var content=tag.className; tag.className=‘c2‘ console.log(tag.className); </script>
3.3classList修改標簽的class樣式
<div id="d1" class="c1">d1</div> <script> var tag=document.getElementById(‘d1‘); var content=tag.classList; //class增加一個c2 content.add(‘c2‘); console.log(content); //class減掉一個c1 content.remove(‘c1‘); console.log(content); </script>
js基礎--Dom操作