Element對象的基礎瞭解

時間 2019-11-10

標籤 element 對象基礎瞭解简体版

原文原文鏈接

Element對象是什麼

DOM的標準規範中提供了Element對象，該對象提供了HTML頁面中全部元素所具備的屬性和方法。
全部的HTML元素都是HTNLElement對象，而這個對象繼承於Element對象。html

<body>
<div id="ms">櫻花櫻花想見你</div>
<script>
    var ms = document.getElementById('ms');

    console.log(ms instanceof HTMLDivElement);//true
    console.log(ms instanceof Node);//true
    console.log(ms instanceof Element);//true

    //Element對象是繼承於Node對象的
    console.log(Element.prototype instanceof Node);//true
    // HTMLButtonElement是繼承於HTMLElement
    console.log(HTMLDivElement.prototype instanceof HTMLElement);// true
    // HTMLElement是繼承於Element
    console.log(HTMLElement.prototype instanceof Element);//true
</script>
</body>

定位頁面元素

Element對象提供了屬性和方法定位頁面元素
Document對象定位的是HTML頁面中全部指定元素
Element對象定位的是置頂元素內全部指定元素prototype

getElementByTagName():經過頁面元素的元素名稱定位元素
getElementTbClassName():經過頁面元素的class屬性值定位元素
querySelector():經過CSS選擇器定位第一個匹配的元素
querySelectorAll():經過CSS選擇器定位全部匹配的元素

<body>
<ul id="ms">
    <li>櫻花櫻花想見你</li>
    <li>提燈照河山</li>
</ul>
<ul id="novel">
    <li>化物語</li>
    <li>僞物語</li>
</ul>
<script>
    //document對象定位HTML頁面元素
    var ms = document.getElementsByTagName('li');
    console.log(ms);

    //Element對象定位標籤內元素
    var novel = document.getElementById('novel');
    var li = novel.getElementsByTagName('li');
    console.log(li);
</script>
</body>

獲取子元素

children:獲取指定節點全部的子元素
childElementCount:獲取置頂元素全部子元素的個數
firseElementChild：獲取指定節點第一個子元素
lastElementChlid：獲取指定節點最後一個子元素

<body>
<ul id="ms">
    <li>櫻花櫻花想見你</li>
    <li>明月天涯</li>
    <li>燃盡人間色</li>
</ul>
<script>
    var ms = document.getElementById('ms');
    //獲取全部子元素 - 沒有兼容問題
    var children = ms.children;
    console.log(children);

    //如下屬性有兼容問題
    var childElementCount = ms.childElementCount;
    console.log(childElementCount);

    var firEC = ms.firstElementChild;
    console.log(firEC);
    
    var lasEC = ms.lastElementChild;
    console.log(lasEC);
</script>
</body>

獲取相鄰兄弟元素

經過Element對象的如下屬性能夠獲取相鄰兄弟元素code

previousElementSibling:獲取指定元素前面的相鄰兄弟元素
nextElementSibling：獲取指定元素後面的相鄰兄弟元素

<body>
<ul id="ms">
    <li>櫻花櫻花想見你</li>
    <li id="bm">明月天涯</li>
    <li>燃盡人間色</li>
</ul>
<script>
    var ms = document.getElementById('bm');
    //獲取前面一個兄弟元素
    var pes = ms.previousElementSibling;
    console.log(pes);

    var nes = ms.nextElementSibling;
    console.log(nes);
</script>
</body>

Element對象屬性操做

getAttribute():獲取指定元素的屬性值
setAttribute():設置指定元素的屬性值
removeAttribute():刪除指定元素的屬性
hasAttribute()：判斷是否含有指定屬性

<body>
<ul id="ms">
    <li>櫻花櫻花想見你</li>
    <li id="bm" class="bmo">明月天涯</li>
    <li>燃盡人間色</li>
</ul>
<script>
    var bm = document.getElementById('bm');
    //獲取指定元素的屬性值
    var gab = bm.getAttribute('class');
    console.log(gab);
    //設置屬性
    bm.setAttribute('name','bmoo');
   //刪除屬性
    bm.removeAttribute('name');
    //判斷屬性是否存在
    console.log(ms.hasAttribute('name'));
</script>
</body>

innerHTML屬性

innerHTML屬性表示HTML頁面指定元素後代的HTML代碼htm

<body>
<ul id="ms">
    <li>櫻花櫻花想見你</li>
    <li id="bm">明月天涯</li>
    <li>燃盡人間色</li>
</ul>
<script>
    var ms = document.getElementById('ms');
    //獲取指定元素的HTML代碼
    var html = ms.innerHTML;
    console.log(html);
    html +='<li>我有一座四色城</li>';
    ms.innerHTML=html
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。