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操作