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>