JS中獲取元素屬性的8大方法

天想聊聊在Web前端開發中經常用到的技術：獲取元素屬性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】

這些方法，大家應該用過，如果讓你說出它們的一些區別和聯系，能答得上來嗎？接下來讓我們一起來溫故下。

首先我們需要把它們歸類下：

innerHTML、outerHTML、innerText 、outerText、value 屬于原生javascript的方法。
text()、html()，val()屬于jQuery中的方法。

1、innerHTML 屬性

在讀模式下，innerHTML屬性返回與調用元素的所有子節點（包括元素、注釋和文本節點）對應的 HTML 標記。在寫模式下，innerHTML 會根據指定的值創建新的 DOM 樹，然后用這個 DOM 樹完全替換調用元素原先的所有子節點。下面是一個例子：

<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>

對于上面的<div>元素來說，它的 innerHTML 屬性會返回如下字符串。

<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

2、outerHTML 屬性

在讀模式下，outerHTML 返回調用它的元素及所有子節點的 HTML 標簽。在寫模式下，outerHTML 會根據指定的 HTML 字符串創建新的 DOM 子樹完全替換調用元素。下面是一個例子。

<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>

如果在<div>元素上調用 outerHTML，會返回與上面相同的代碼，包括<div>本身。

使用 outerHTML 屬性以下面這種方式設置值：

div.outerHTML = "<p>This is a paragraph.</p>";

這行代碼完成的操作與下面這些 DOM 腳本代碼一樣：

var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

結果，就是新創建的<p>元素會取代 DOM 樹中的<div>元素。

replaceChild() 方法用新節點替換某個子節點。

語法：

node.replaceChild(newnode,oldnode)

3、innerText 屬性

通過 innerText 屬性可以操作元素中包含的所有文本內容，包括子文檔樹中的文本。在通過 innerText 讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過 innerText 寫入值時，結果會刪除元素的所有子節點，插入包含相應文本值的文本節點。下面是一個例子：

<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

對于這個例子中的 <div> 元素而言，其中 innerText 屬性會返回下列字符串：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

使用 innerText 屬性設置這個<div>元素內容，則只需一行代碼：

div.innerText = "Hello world!";

執行這行代碼后，頁面的 HTML 代碼就會變成如下所示：

<div id="content">Hello world!</div>

設置 innerText 屬性移除了先前存在的所有子節點，完全改變了 DOM 樹。

設置 innerText 永遠只會生成當前節點的一個子文本節點，而為了確保只生成一個字文本節點，就必須要對文本進行 HTML 編碼。利用這一點，可以通過 innerText 屬性過濾掉 HTML 標簽。方法是將 innerText 設置等于 innerText，這樣就可以去掉所有 HTML 標簽，比如：

div.innerText = div.innerText;

執行這行代碼后，就用原來的文本內容替換了容器元素中的所有內容（包括子節點，因而也就去掉了 HTML 標簽）。舉個栗子：

<label id="lab">請輸入北京今天空氣質量：<input id="aqi-input" type="text"></label>

輸出：

4、outerText 屬性

除了作用范圍擴大到了包含調用它的節點之外，outerText 與innerText 基本上沒有多大區別。在讀取文本值時，outerText 與 innerText 的結果完全一樣。但在寫模式下，outerText 就完全不同了：outerText 不只是替換調用它的元素的子節點，而是會替換整個元素（包括子節點）。比如：

div.outerText = "Hello world!";

這行代碼實際上相當于如下兩行代碼：

var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text,div);

本質上，新的文本節點會完全取代調用 outerText 的元素。此后，該元素就從文檔中被刪除，無法訪問。

5、value 屬性

屬性可設置或返回密碼域的默認值。獲取文本框的值。

6、text():設置或者獲取所選元素的文本內容

1）無參text（）：

取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。返回的是一個String。

2）有參text（val）：

設置所有匹配元素的文本內容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應的HTML實體).返回一個jquery對象。

7、html():設置或者獲取所選元素的內容（包括html標記）

1）無參html（）：

取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔，返回的是一個String。

2）有參html（val）：

設置每一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。返回一個jquery對象。

8、val()方法

主要用于獲取表單元素的值如input, select 和 textarea。當在一個空集合上調用，它返回undefined；

1）無參 val() :

獲取匹配的元素集合中第一個元素的當前值。例子：

HTML代碼：

<input type="text" value="你好啊">
<input type="text" value="啊哈哈哈">
<input type="text" value="嘻嘻嘻嘻">

控制臺輸出：

2）有參val（val）：

設置每一個匹配元素的值。返回一個jquery對象。

總結

對于這八大方法：innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()。您現在是否已經很清晰了？

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://mp.weixin.qq.com/s/K7SyPeuZedmuj-a4HwoYfQ
作者：前端大牛愛好者

面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。

下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。

方法	描述
addClass()	向被選元素添加一個或多個類名
after()	在被選元素后插入內容
append()	在被選元素的結尾插入內容
appendTo()	在被選元素的結尾插入 HTML 元素
attr()	設置或返回被選元素的屬性/值
before()	在被選元素前插入內容
clone()	生成被選元素的副本
css()	為被選元素設置或返回一個或多個樣式屬性
detach()	移除被選元素（保留數據和事件）
empty()	從被選元素移除所有子節點和內容
hasClass()	檢查被選元素是否包含指定的 class 名稱
height()	設置或返回被選元素的高度
html()	設置或返回被選元素的內容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的寬度（包含 padding，不包含 border）
insertAfter()	在被選元素后插入 HTML 元素
insertBefore()	在被選元素前插入 HTML 元素
offset()	設置或返回被選元素的偏移坐標（相對于文檔）
offsetParent()	返回第一個定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的寬度（包含 padding 和 border）
position()	返回元素的位置（相對于父元素）
prepend()	在被選元素的開頭插入內容
prependTo()	在被選元素的開頭插入 HTML 元素
prop()	設置或返回被選元素的屬性/值
remove()	移除被選元素（包含數據和事件）
removeAttr()	從被選元素移除一個或多個屬性
removeClass()	從被選元素移除一個或多個類
removeProp()	移除通過 prop() 方法設置的屬性
replaceAll()	把被選元素替換為新的 HTML 元素
replaceWith()	把被選元素替換為新的內容
scrollLeft()	設置或返回被選元素的水平滾動條位置
scrollTop()	設置或返回被選元素的垂直滾動條位置
text()	設置或返回被選元素的文本內容
toggleClass()	在被選元素中添加/移除一個或多個類之間切換
unwrap()	移除被選元素的父元素
val()	設置或返回被選元素的屬性值（針對表單元素）
width()	設置或返回被選元素的寬度
wrap()	在每個被選元素的周圍用 HTML 元素包裹起來
wrapAll()	在所有被選元素的周圍用 HTML 元素包裹起來
wrapInner()	在每個被選元素的內容周圍用 HTML 元素包裹起來
$.escapeSelector()	轉義CSS選擇器中有特殊意義的字符或字符串
$.cssHooks	提供了一種方法通過定義函數來獲取和設置特定的CSS值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

獎和開盲盒性質一樣的都是通過ajax讀取后臺的隨機數據。

圖1 轉輪盤抽獎

圖2 轉輪盤抽獎結果

1、轉輪盤

本來是想直接繪圖實現輪盤，但是沒有找到怎么填充文字，只好把輪盤弄成了背景圖，通常用于游戲抽道具，商城積分抽獎，公司年末員工抽獎

點擊抽獎觸發jquery的click事件；
通過ajax獲取后臺的隨機數；
后臺通過mt_rand得到隨機獎項（角度），返回給前臺；
通過jquery改變css transform、transition屬性，旋轉背景，也就是輪盤；

html代碼

<style>
.box{
    width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
    background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
    cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>

<div  class='box' >
    <div  class='beij'></div>
    <div  class='pointer'></div>
</div>

js代碼

<script>
$(document).ready(function() {
	var time=0.4;//轉一圈所需時間 s
	var count=10;//默認多轉幾圈
	/*
	var angle=new Array();
	angle[0]=23;
	angle[1]=53;
	angle[2]=83;
	angle[3]=110;
	angle[4]=133;
	angle[5]=163;
	angle[6]=223;
	*/
	var i=1;
    $(".pointer").click(function(){ 
		$.ajax({
			url: "/public/man/index.php/api/choujiang",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				//console.log(result.msg);
				$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
				//彈窗提示
        //setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
        setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
			}
		})
		i++;
	});
});
</script>

說明：

因為改變css進行旋轉，開始的時候，直接執行了彈窗或者是console.log，這并不符合我們的要求，加入了setTimeout，在旋轉完成以后，再給出提示；
time*1000*(5+result.angle/360) 是總得旋轉時間；

后臺接口程序

    public function choujiang(){
		/*
		    id   獎品編號
			title  中獎提示
			prec  中獎概率
			angle  旋轉角度
		*/
		$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等獎：蘋果手機一部！','prec'=>1,'angle'=>23);
		$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等獎：Ipad','prec'=>2,'angle'=>68);
		$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等獎：','prec'=>25,'angle'=>113);
		$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等獎','prec'=>50,'angle'=>155);
		$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等獎','prec'=>80,'angle'=>202);
		$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等獎','prec'=>150,'angle'=>245);
		$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等獎','prec'=>240,'angle'=>290);
		$arr[7]=array('id'=>8,'title'=>'獲得50元優惠券，還需加油哦！','prec'=>380,'angle'=>337);

        //中獎幾率求和
		$cmun=0;
		for($i=0;$i<=count($arr)-1;$i++){
			$cmun+=$arr[$i]['prec'];
		}
        //中獎隨機數
        $smrand=mt_rand(1,$cmun);
        $this->getRand(1,0,$arr,count($arr),$smrand);			
	}

    public function getrand($m,$im,$arr,$count,$smrand){
		/*
		    $m  起始數
			$im  第幾個數組元素
			$count  數組總得元素個數
			$arr  原始數組
			$smrand  中獎隨機數
		*/

        //已經中獎
		if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
				//中獎返回
				$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));			   
		}else{
		   //最后一個不需要判斷  直接返回
		   if($im+1==$count-1){
				$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));		
		   }else{
		       //起始數字
			   $start=$arr[$im]['prec']+$m;
			   //遞歸  再次調用數組  讀取下一個數組元素
			   $this->getrand($start,$im+1,$arr,$count,$smrand);
		   }
		}
	
	}

說明：

以上概率算法采用的是所有概率求和做分母、出現的概率做分子，如果才有百分比，實現方式是一樣的；
采用遞歸，依次判斷每一次的起始數字和結束數字，中獎的隨機數是否在該范圍內，在，就是中得該獎項，否則沒中，再判斷下一個；
最后一個數組元素是不需要判斷的，前邊的都不是，最后一個一定就是中獎；
記錄誰獲得了什么獎項，應該是在后臺返回數據之前，不能是前臺彈窗以后通過ajax通知后臺中獎信息；

2、隨機抽取一個幸運員工

點擊開始抽獎，單行文本框循環顯示員工，抽獎按鈕文字變為停止，點擊停止的時候，抽中的員工顯示在獲獎名單。

圖3 隨機抽取幸運員工

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
    var t;
	var yuangong=new Array();
	$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
	})

  
$(document).ready(function() {

    $("#choujiang").click(function(){ 
		if($(this).html()=='開始抽獎'){
          if(yuangong.length>=3){
			$(this).html("停止");
			start();
		  }
		}else{
		    $(this).html("開始抽獎");
			stop();
		}
	});
});

function start() {
	num = Math.floor(Math.random() * (yuangong.length-1));
	$('#ygname').val(yuangong[num]['title']);
	t = setTimeout(start, 0);
}
function stop() {
	clearInterval(t);
	//數組中刪除中獎員工信息防止重復中獎
	yuangong.splice($.inArray(yuangong[num], yuangong), 1);
	$(".box  ul").append("<li>"+$('#ygname').val()+"</li>");

}

</script>

說明：

num = Math.floor(Math.random() * (yuangong.length));

yuangong.length員工數組長度；
Math.random() 0到1的小數，包含0，不包含1；
Math.floor 小數向下取整，可以為0；

綜上：num得到的是0到數組下標的隨機數。

clearInterval(t)：用于停止t = setTimeout(start, 0);

后臺php接口程序

    public function yuangong(){
		$yuangong[0]=array('id'=>1,'title'=>'業務部【張三】');
		$yuangong[1]=array('id'=>2,'title'=>'技術部【李四】');
		$yuangong[2]=array('id'=>3,'title'=>'技術部【逍遙】');
		$yuangong[3]=array('id'=>4,'title'=>'會計部【薛嫣】');
		$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
		$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
		$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');

		$msg=array('msg'=>$yuangong);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

3、隨機抽取多個幸運員工

沒有想到什么效果，只是單純地獲取了隨機數

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
var yuangong=new Array();
var ygstr='';//存取獲獎員工
var ygrs=5;//一次抽幾個
var t;
$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
})

$(document).ready(function() {
    $("#choujiang").click(function(){ 
		if(yuangong.length>=ygrs){
		    start(1);
		}
	});
});

function start(ms) {
   //ms  第幾次獲取員工信息
   num = Math.floor(Math.random() * (yuangong.length));
   console.log(num);
   ygstr+="<li>"+yuangong[num]['title']+"</li>";
   if(ms>=ygrs){
	   $(".box  ul").html(ygstr);
	   ygstr="";
   }else{
	   yuangong.splice($.inArray(yuangong[num], yuangong), 1);
       start(ms+1);
   }
    	
}
</script>

4、在線開盲盒

需要我們點擊抽獎的時候通過ajax讀取后臺獲得的盲盒信息，直接顯示到前臺，前臺顯示同上邊的，都是一樣，說一下后臺程序。

使用array_rand().隨機獲取幾個數組元素

array_rand($arr,$count).用法

$arr目標數組；
$count隨機的個數;

返回值是原數組的下標。

    public function manghe(){
	
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}

		$msg=array('msg'=>$rearr);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

如果包含特殊獎項，需要滿足抽獎多少次，一定抽中，可以達到抽獎次數以后在array_rand內隨機數減一，然后把大獎塞進該次抽獎的返回信息。

array_push($rearr,$a)用法：

$rearr目標數組；
$a追加的元素或者是數組

    $tebie[999]=array('id'=>999,'title'=>'特別大獎');
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}
        array_push($rearr,$tebie[999]);

        dump($rearr);

        exit;

輸出結果：

在線咨詢

上一篇：如何在互聯網放置 HTML 頁面
下一篇：JavaScript 返回頂部實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JS中獲取元素屬性的8大方法

您的項目需求