DOM中关于属性的基本操作

1、获取属性

<div id="box" class="test">11111</div>
var oDiv=document.getElementById("box");
oDiv.id
oDiv.className

2、自定义属性的一些操作

<div id="box" class="test" data-id="222">11111</div>
  var oDiv=document.getElementById("box");
oDiv.attributes //获取所有的属性
oDiv.getAttribute("data-id")   //获取默认属性和自定义属性都可
oDiv.setAttribute("id","box11") //修改属性
oDiv.removeAttribute("id") //移除属性

3、节点类型：元素节点、属性节点、、文本节点

<div id="box" class="test" data-id="222">11111</div>
var oDiv=document.getElementById("box");
oDiv.nodeType  //1 即元素节点
oDiv.nodeName // DIV 节点名称
oDiv.attributes[0].nodeType // 2  即属性节点

var oTxt=document.createTextNode("这是一个文本节点");
oTxt.nodeType //3 即文本节点

4、获取子元素节点

<div id="box" class="test" data-id="222">
        <p>ppp</p>
        <span>span</span>
</div>
<script>
    var oDiv=document.getElementById("box");
    console.log(oDiv.children)  //获取子元素节点
</script>

5、获取元素内部信息

<div id="box" class="test" data-id="222">
        <p>ppp</p>
        <span>span</span>
</div>
<script>
    var oDiv=document.getElementById("box");
    console.log(oDiv.innerHTML,oDiv.outerHTML,oDiv.innerText) 
 </script>
//innerHTML outerHTML 
//相同点：标签输出
//不同点 ：innerHTML 把元素内部的信息原样输出。outerHTML 元素本身和元素内部的内容待标签输出
//oDiv.innerText 输出元素内的内容  不带标签

6、获取第一个子节点兼容写法

<div id="box" class="test" data-id="222">
       <p>1</p>
       <p>2</p>
       <p>3</p>
       <p>4</p>
</div>
<script>
    var oDiv=document.getElementById("box");
    var firstchild =oDiv.firstElementChild||firstchild;   //兼容写法
    console.log(firstchild)
</script>