JavaScript

idとは

　idとは、HTMLで何らかの処理をする際の目印となる属性です。

　JavaScriptに直接 IDを設定するわけではなく、HTMLなどで idを要素の属性として指定します。

　そして、HTMLで設定した idを JavaScriptで取得することが可能です。

　idは同一のページでは１つしか使えません。

　また、スタイルシート（CSS）に定義されたスタイルを適用したり、ページ内リンクとして利用することができます。

コード例


<div id="title">This is title.</div>
<!-- ページ内リンク -->
<a href="#title">タイトルへ移動</a>

/* スタイルの適用 */
#title {
	font-size:16px;
}

JavaScriptで要素の idを取得する方法

　querySelectorメソッドなどで要素を取得後に、idプロパティや getAttributeメソッドを使って取得できます。


// <div id="title"> がターゲット
const element = document.querySelector('div');
console.log(element.id);
// => 'title'
console.log(element.getAttribute('id'));
// => 'title'

　jQueryの場合には attrや propを使います。


// <div id="title"> がターゲット
const element = $('div');
console.log(element.attr('id'));
// => 'title'

JavaScriptで要素のidを設定する方法

　querySelectorなどで要素を取得後に、idプロパティや setAttributeメソッドを使って設定可能です。


// <div id="title"> がターゲット
const element = document.querySelector('div');
element.id = 'new-title'
// ↑ <div id="new-title"> となる
element.setAttribute('id', 'sub-title');
// ↑ <div id="sub-title"> となる

　idそのものを削除したい場合には、removeAttributeを使いましょう。


element.removeAttribute('id');
// ↑ <div> となる

　jQueryの場合には attrや propを使います。


// <div id="title"> がターゲット
const element = $('div');
element.attr('id', 'new-title');
// ↑ <div id="new-title"> となる

　jQueryで idを削除したい場合は removeAttrを使用してください。


element.removeAttr('id');
// ↑ <div> となる