js获取或设置html 内容、节点属性操作

短命女 2022-12-31 13:19 5阅读 0赞

# 获取或设置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");