Element对象的基础了解

Element对象是什么

DOM的标准规范中提供了Element对象，该对象提供了HTML页面中所有元素所具有的属性和方法。
所有的HTML元素都是HTNLElement对象，而这个对象继承于Element对象。

<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对象定位的是置顶元素内所有指定元素

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对象的以下属性可以获取相邻兄弟元素

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代码

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