各種getElementBy**的區別和總結，附示例代碼一看就懂

生js里的DOM操作，首先要獲取待操作的元素，而初學者對獲取元素所使用的getElement的幾個方法是不是經常容易混呢？看了本文就全明白了！

一般說明：

1、注意大小寫！
2、注意其中Element的單、復數！

方法一：getElementById

通過Id來取得元素,Id是唯一的，示例如下：

<div id="cat"></div>
<script>
	a = document.getElementById('cat');
	a.innerHTML = "hello cat!";
</script>

說明：在這個代碼中，a為id是cat的元素，操作a把它的內容改成 hello cat!

getElementById 這個方法是最常用的，通常記住這個就夠你用的了！

方法二：getElementsByName

通過NAME來獲得元素,

注意,因為NAME可以重復,所以Element是復數，要加個s，所以這個方法是取得一個數組。IE不支持。示例如下：

<div name="dog">第一個</div>
<div name="dog">第二個</div>
<script>
	a = document.getElementsByName('dog');
	a[1].innerHTML = "hello dog!";
</script>

說明：在這個代碼中，a為所有name是dog的元素集合，操作其中的第2個，把內容改成 hello dog!

方法三：getElementsByTagName

通過TAGNAME（HTML的標簽名字）來獲得元素，

注意，因為標簽可以重復,所以Element是復數，要加個s，所以這個方法也是取得一個數組。示例如下：

<div>
	<span>第一個</span>
	<span>第二個</span>
</div>
<script>
	a = document.getElementsByTagName('span');
	a[1].innerHTML = "hello span!";
</script>

說明：在這個代碼中，a為所有標簽是span的元素集合，操作其中的第2個，把內容改成 hello span!

方法四：getElementsByClassName

通過class（樣式名）來獲得元素，

注意，因為樣式引用可以重復,所以Element是復數，要加個s，所以這個方法也是取得一個數組。示例如下：

<div class="apple">第一個</div>
<div class="apple">第二個</div>
<script>
	a = document.getElementsByClassName('apple');
	a[1].innerHTML = "hello apple!";
</script>

說明：在這個代碼中，a為所有樣式class是apple的元素集合，操作其中的第2個，把內容改成 hello apple!

至此四個方法都搞定了！再也不會混淆了吧？

javascript開發中我們會經常獲取頁面中的事件對象，然后來處理這些事件，例如下面的getEvent函數就是獲取javascript下的頁面事件對象。

function getEvent(event){
return event || window.event;
}

hrome 126 于近期發布了穩定版本，其中一個比較有意思的更新是給 HTML 帶來一個新的元素：<permission> ，它將從這個版本開始試用，并且正在努力走向標準化。

今天我們一起來看下這個 <permission> 元素的用法。

Web 權限提示的問題

當 Web 應用程序需要訪問瀏覽器的高級功能時，需要向用戶主動請求許可。例如，當百度地圖使用 Geolocation API 獲取用戶的地理位置時，瀏覽器會提示用戶申請權限，這是權限規范中定義明確的概念。

申請權限的觸發方式一般分為兩類，被動隱式觸發，或者主動顯示觸發：

例如，Geolocation API 是一個強大的 API，它的使用依賴于首次使用時隱式詢問的方法。例如，當程序調用 navigator.geolocation.getCurrentPosition() 方法時，權限提示框會在第一次調用時自動彈出，還有另外一個例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一種顯式的方式通過靜態方法來請求權限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

網站可以在加載時立即調用諸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。這會導致在用戶還沒與網站進行交互時就彈出權限提示。這就是明顯的權限濫用行為，并且影響到兩種方式，既包括首次使用時的隱含詢問，也包括提前明確請求。

權限濫用導致瀏覽器廠商要求有像點擊按鈕或按下按鍵這樣的用戶操作，然后才會顯示權限提示。這種方法的問題在于，瀏覽器很難確定某個特定的用戶操作是否應該導致顯示權限提示。也許用戶只是因為頁面加載時間太長而在頁面上隨意某個地方隨便點擊，有些網站也變得非常擅長誘騙用戶點擊內容來觸發提示。

另一個問題是權限提示框通常顯示的方式：在網站的 “死亡線” 之上（特別是在大屏幕上），也就是說，在應用程序能夠繪制到的瀏覽器窗口區域之外。用戶在剛剛點擊了窗口底部的一個按鈕后，可能會錯過瀏覽器窗口頂部的提示，這種情況還是挺常見的。當瀏覽器有應對權限濫用的緩解措施時，這個問題往往會更加嚴重。

另外，用戶一旦做出了拒絕某個權限的操作，之后想要改變就不太容易了。他們得找到特定的地方，比如那個網站信息下拉菜單，然后去進行重置或調整權限的操作，而且還得重新加載頁面才行。網站也沒辦法提供很方便的途徑讓用戶快速改變權限狀態，還得詳細地告訴用戶怎么去找到地方改變設置。

如果某個權限是非常重要的，比如視頻會議軟件要用麥克風權限，那像谷歌會議這類的軟件就會彈出很顯眼的對話框來告訴用戶怎么去把之前阻止的權限給開通。

<permission>元素

為了解決上面的這些問題，<permission> 元素誕生了。這個元素允許開發者以聲明方式請求使用權限，如下例所示：

<permission type="camera" />

“type” 屬性代表你正在請求的權限列表（如果有多個可以以空格分割）。目前，允許的值是 'camera'，'microphone' 以及 'camera microphone'。默認情況下，這個元素呈現出來的樣子類似于具有最簡用戶代理樣式的按鈕。

對于某些允許附加參數的權限，type-ext 屬性接受以空格分隔的鍵值對，例如 precise:true 地理位置權限。

當用戶與 <permission> 元素交互時，他們可以循環經歷各個階段：

如果他們之前不允許某項功能，他們可以在每次訪問時允許該功能，或者在當前訪問時允許該功能。

如果他們之前允許該功能，他們可以繼續允許，或者停止允許。

如果他們之前不允許某項功能，他們可以繼續不允許它，或者這次允許它。

<permission> 元素的文本會根據狀態自動更新。例如，如果已授予使用某項功能的權限，則文本會更改為表示允許使用該功能。如果需要先授予權限，則文本會更改為邀請用戶使用該功能。將之前的屏幕截圖與以下屏幕截圖進行比較，以查看這兩種狀態。

<permission> 元素可以與 Permissions API 一起使用。有許多事件可供監聽：

onpromptdismiss：當元素觸發的權限提示被用戶關閉（例如，單擊關閉按鈕或單擊提示之外）時，會觸發此事件。
onpromptaction：當元素觸發的權限提示已被用戶對提示本身采取某種操作解決時，觸發此事件。這并不一定意味著權限狀態已經改變，用戶可能已經采取了維持現狀的操作（例如繼續允許權限）。
onvalidationstatuschange：當元素從 "valid" 切換到 "invalid" 時觸發此事件，例如當元素被其他超文本標記語言內容部分遮擋時，會認為是 "invalid"。

我們可以直接在 HTML 代碼中內聯注冊這些事件的事件監聽器（<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />），或者在 <permission> 元素上使用 addEventListener()：

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
    // Run the initial check.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });
</script>

最后

參考：https://developer.chrome.com/blog/permission-element-origin-trial

在線咨詢

上一篇：微信小程序架構原理
下一篇：設計靈感 - 精美登錄頁設計案例賞析

您的項目需求

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

整合營銷服務商

各種getElementBy**的區別和總結，附示例代碼一看就懂

Web 權限提示的問題

<permission>元素

最后

您的項目需求