WEB

javascriptでHTML要素取得!兄弟や親、子要素も!jQueryとも比較!

javascriptでHTML要素取得!兄弟や親、子要素も!jQueryとも比較!

javascriptで要素を取得する方法をご紹介していきます。

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の取得位置はこちら。
「idが"sample"のdiv」を基準としています。

<div> // この要素を取得する方法(親要素)
	<span>前の要素</span> // この要素を取得する方法(兄弟要素)
	<div id="sample"> // この要素を取得する方法(ターゲット要素)
		<span> // この要素を取得する方法(子要素)
		test // この要素を取得する方法
		</span>
	</div>
	<span>後の要素</span> // この要素を取得する方法(兄弟要素)
</div>

取得位置の上から順に記載していきます。

なお、要素のみ取得(指定)ですので、テキストやHTMLを取得したい時は、
javascriptであればinnerTextやinnerHTML、jQueryであればtext()やhtml()で取得してください。

親要素取得

<div> // この要素を取得する方法(親要素)
	<span>前の要素</span>
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>
<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode;

// jQueryで要素を取得する方法
$('#sample').parent();
</script>

前の兄弟要素取得

<div>
	<span>前の要素</span> // この要素を取得する方法(兄弟要素)
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>
<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.previousSibling;

// jQueryで要素を取得する方法
$('#sample').prev();
</script>

ターゲット要素取得

<div>
	<span>前の要素</span>
	<div id="sample"> // この要素を取得する方法(ターゲット要素)
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>
<script>
// javascriptで要素を取得する方法
document.getElementById('sample');

// jQueryで要素を取得する方法
$('#sample');
</script>

子要素取得

<div>
	<span>前の要素</span>
	<div id="sample">
		<span> // この要素を取得する方法(子要素)
		test
		</span>
	</div>
	<span>後の要素</span>
</div>
<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.firstChild;

// jQueryで要素を取得する方法
$('#sample span');
</script>

要素内のテキスト取得

<div>
	<span>前の要素</span>
	<div id="sample">
		<span>
		test // この要素を取得する方法
		</span>
	</div>
	<span>後の要素</span>
</div>
<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.firstChild.innerText;

// jQueryで要素を取得する方法
$('#sample span').text();
</script>

後ろの兄弟要素取得<

<div>
	<span>前の要素</span>
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span> // この要素を取得する方法(兄弟要素)
</div>
<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.nextSibling;

// jQueryで要素を取得する方法
$('#sample').next();
</script>

javascriptでHTML要素削除!jQueryとも比較!

javascriptで要素を削除する方法をご紹介していきます。

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の削除位置はこちら。
「idが"sample"のdiv」を基準としています。

<span>上の要素</span> // この要素を削除する方法
<div id="sample"> // この要素を削除する方法
test // この要素を削除する方法
</div>
<span>下の要素</span> // この要素を削除する方法

削除位置の上から順に記載していきます。

上の兄弟要素削除

<span>上の要素</span> // この要素を削除する方法
<div id="sample">
test
</div>
<span>下の要素</span>
<script>
// remove()で要素を削除する方法(IE未対応)
var sampleDiv = document.getElementById('sample');
sampleDiv.previousSibling.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv.previousSibling);

// jQueryで要素を削除する方法
$('#sample').prev().remove();
</script>

ターゲット要素削除

<span>上の要素</span>
<div id="sample"> // この要素を削除する方法
test
</div>
<span>下の要素</span>
<script>
// remove()で要素を削除する方法(IE未対応)
var sampleDiv = document.getElementById('sample');
sampleDiv.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv);

// jQueryで要素を削除する方法
$('#sample').remove();
</script>

要素内をすべて削除

<span>上の要素</span>
<div id="sample">
test // この要素を削除する方法
</div>
<span>下の要素</span>
<script>
// innerHTMLで要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.innerHTML = '';

// jQueryで要素を削除する方法
$('#sample').empty();
</script>

下の兄弟要素削除

<span>上の要素</span>
<div id="sample">
test
</div>
<span>下の要素</span> // この要素を削除する方法
<script>

// remove()で要素を削除する方法(IE未対応)
var sampleDiv = document.getElementById('sample');
sampleDiv.nextSibling.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv.nextSibling);

// jQueryで要素を削除する方法
$('#sample').next().remove();
</script>

javascriptでHTML要素追加!jQueryとも比較!

javascriptで要素を追加する方法をご紹介していきます。
insertAdjacentHTMLを使用する方法と使用しない方法の2種類を記載していきます。

insertAdjacentHTMLは、だいたいのブラウザで対応済みですが、念のためそれ以外の方法も記載している感じになります。

insertAdjacentHTMLの対応ブラウザ
https://caniuse.com/#feat=insertadjacenthtml

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の追加位置はこちら。

// ここに要素を追加する方法
<div id="sample">
// ここに要素を追加する方法
test
// ここに要素を追加する方法
</div>
ここに要素を追加する方法// 

追加位置の上から順に記載していきます。

要素の上に要素追加

// ここに要素を追加する方法
<div id="sample">
test
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('beforebegin', '<span>afterbeginで要素追加</span>');

//  insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.parentNode.insertBefore(newNode, sampleDiv); 

// jQueryで要素を追加する方法
$('#sample').before($('<span>afterbeginで要素追加</span>'));
</script>

要素内の一番初めに要素追加

<div id="sample">
// ここに要素を追加する方法
test
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('afterbegin', '<span>afterbeginで要素追加</span>');

insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.insertBefore(newNode, sampleDiv.firstChild);

// jQueryで要素を追加する方法
$('#sample').prepend($('<span>afterbeginで要素追加</span>'));
</script>

要素内の一番最後に要素追加

<div id="sample">
test
// ここに要素を追加する方法
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('beforeend', '<span>afterbeginで要素追加</span>');

// appendChildで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.appendChild(newNode);

// jQueryで要素を追加する方法
$('#sample').append($('<span>afterbeginで要素追加</span>'));
</script>

要素の下に要素追加

<div id="sample">
test
</div>
ここに要素を追加する方法// 
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('afterend', '<span>afterbeginで要素追加</span>');

// insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.parentNode.insertBefore(newNode, sampleDiv.nextSibling);

// jQueryで要素を追加する方法
$('#sample').after($('<span>afterbeginで要素追加</span>'));
</script>

Microsoftの新しいEdgeブラウザ「ChromiumベースEdge」

microsoft-edge

Microsoftの新しいEdgeブラウザが配信開始されました。

Web関連の開発やサイトを持っている方は、今後ブラウザチェックに新Edgeを入れる必要が出てきそうです。

公式サイト:https://www.microsoft.com/en-us/edge

新旧のEdgeの違いは?

新しいChromiumベースのEdgeと旧Edgeでレンダリングエンジンが違います。

新Edge Blinkレンダリングエンジン
旧Edge EdgeHTMLレンダリングエンジン

Blinkレンダリングエンジンは、Google Chrome 28以降、Opera 15以降、Android 4.4 の標準ブラウザなどで採用されています。

新しいEdgeもこれらのブラウザとと同じ種類のレンダリングエンジンを使っているので、cssなどの表示が似てくると思います。

開発者を困らせていたIE対応、Edge対応が減るといいのですが。

WordPressのセキュリティが心配ならWordPress脆弱性診断サービス!

wordpress脆弱性診断

WordPressは何かとセキュリティの問題がつきまといます。

乗っ取られたり、改ざんされたりしたら自分も困りますが、利用者の方にも迷惑をかけてしまいます。

Webサイトでは「速度」「セキュリティ」「デザイン」が大事だと思います。

その中でもセキュリティは後回しにしがちですし、対応が不十分だったりします。

そこでカゴヤ・ジャパン株式会社が提供している「WordPress脆弱性診断」サービスをご紹介します。

無料ではないので注意を。

WordPress脆弱性診断

WordPress脆弱性診断は サイトURLからWordPressの本体、プラグイン、テーマの脆弱性を診断し、レポートを出してくれます。

特徴

  • 使い方が簡単
  • 明確なレポート
  • メールで通知
  • 定期診断設定
  • 安心のサポート
  • URLのみで診断可能

料金プラン

1回スポット 4,400円
月1回定期診断(1年) 39,600円

機能

https://www.kagoya.jp/rentalserver/wordpress-vas/function/

ご利用の流れ

https://www.kagoya.jp/rentalserver/wordpress-vas/flow/

興味がある方はサイトをのぞいてみてください。