[B! JavaScript][DOM] starneon3517のブックマーク

使ってみよう！MutationObserver！ - Qiita

１）はじめに DOMの監視をしたい、そんな時に使いやすいWebAPIがMutationObserverです。今回はその利用方法について模索してみます。２）MutationObserverとはその名の通り「Mutation（変化）」を「Observe（監視）」するAPI。任意の要素（DOM）の変化を監視することが出来ます。 // 対象とするノードを取得 const target = document.getElementById('target'); // オブザーバインスタンスを作成 const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { // 何かしたいこと console.log(mutation.target); }); }); // オブザーバの設定 c

starneon3517 2020/05/21

リンク

もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識

DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更クラスと属性の変更イベントのリッスンアニメーション記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。それでは始めます。 DOM操作：DOMの取得この記

starneon3517 2017/04/28

リンク

【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③ | unitopi - ユニトピ -

こんにちは！ unitopi新米ライターの、ケインでございます。このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…） ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！【JavaScriptの場合】 jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を

starneon3517 2015/02/19

リンク

javascript DOMの基本操作まとめ

javascriptのDOM操作の基本をおさらいしておこうと思います。jQueryは少し触ったことがあるのですが、javascript自体はほとんど使ったことがないのでこれを機会に勉強していこうと思います。ここではDOMの操作とイベント処理をまとめてみます。これが出来るようになると、Web上でインタラクティブな要素を盛り込むことができるようになります。 javascriptの基本 DOM操作まずはiavascriptのDOM操作から。ここで使うHTMLはこちらです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascriptの練習</title> </head> <body> <div id="main" style="border:1px solid #555;width:400px

starneon3517 2014/07/31

リンク

改行コード、pre、textarea - FAX

JavaScriptpre要素内の文字を変更する際、改行コードの扱いが各ブラウザで異なるようなので以下コードで調べました。 var pre = document.getElementsByTagName('pre')[0]; pre.innerHTML='[R]\r[N]\n[NR]\n\r[RN]\r\n[END]'; pre.appendChild(document.createTextNode('[R]\r[N]\n[NR]\n\r[RN]\r\n[END]')); innerHTMLで追加した結果は以下です。IEOperaFirefox\r空白のみ○○\n空白のみ○○\n\r空白のみ改行×2改行×2\r\n空白のみ○○ createTextNodeで追加した結果は以下です。IEOperaFirefox\r○○×\n空白のみ○○\n\r○改行×2○\r\n改行+空白○○ この結果を見