获取或设置html 内容

innerHtml 设置或获取位于对象起始和结束标签内的html

<div id="one">
        欢迎
        <h1>访问</h1>
</div>
document.getElementById("one").innerHtml // 欢迎 <h1>访问</h1>

innerText 设置或获取位于对象起始和结束标签内的文本

<div id="one">
        欢迎
        <h1>访问</h1>
</div>
document.getElementById("one").innerText // 欢迎 访问

outerHtml 设置或获取对象及其内容的html

<div id="one">
        欢迎
        <h1>访问</h1>
</div>
document.getElementById("one").outerHtml // <div id="one">欢迎 <h1>访问</h1> </div>

outerText 设置或获取对象文本

<div id="one">
        欢迎
        <h1>访问</h1>
</div>
document.getElementById("one").outerText // 欢迎 访问

节点属性操作

attributes 获取所有属性

节点对象.attributes
<div id="one" class="two" title="x" style="">1</div>
var oneDom= document.querySelector("#one");
 console.log("节点属性 ",oneDom.attributes );// id class title style 组成的伪数组

获取属性值

1、节点对象.属性名缺点：不能获取自定义属性，class 写成 className

<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.id    //one
oneDom.className //two
oneDom.xxx // undefined

2、节点对象.getAttribute(属性名);

<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.getAttribute("class");//two
oneDom.getAttribute("xxx");//222

设置属性值

1、节点对象.属性名 = 新的属性值缺点：不能设置自定义属性，class 写成 className

<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.id    ="x"//one
oneDom.className="x" //two
oneDom.xxx // undefined

2、节点对象.setAttribute(属性名,新的属性值);

<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.setAttribute("class","y");
oneDom.setAttribute("xxx","y");

删除属性值

节点对象.removeAttribute(属性名);

<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.removeAttribute("class");
oneDom.removeAttribute("xxx");