DOM Node チラ裏 - latest log
ノードを末尾に追加 Node appendChild(Node newChild) throws DOMException; newChildを親ノードの末尾に追加します。newChildが既にあれば、まずnewChildをドキュメントから取り除き、その後に追加します。追加に成功すると、newChildを返します。 親ノード.appendChild(追加するノード); ノードの挿入 Node insertBefore(newChild, refChild) throws DOMException; newChildをrefChildの前に挿入します。newChildが既にあれば、まずnewChildをドキュメントから取り除き、その後に挿入します。挿入に成功すると、newChildを返します。 先頭に挿入 親ノード.insertBefore(追加するノード, 親ノード.firstChild)
Node.cloneNode() メソッド(コピーノードの生成) - JavaScript リファレンス
令和 4年 5月 1日現在の定義です。 メソッド名 Node.cloneNode() 六文字目の Nを除き全て小文字です。 メソッドの定義 コピーノードの生成。 メソッドの引数 Node.cloneNode( ifDescendantsAlsoCopied ) ifDescendantsAlsoCopied 子孫ノードも含めてコピーの対照とするかを真偽値で指定。 メソッドが行う処理 該当ノードのコピーを生成。 メソッドの返し値 生成されたコピーノード。 規格 DOM 第一水準 対応環境 グーグルクロム マイクロソフトエッジ ◯ ファイヤーフォックス ◯ サファリ ◯ IE ◯ Node.cloneNode() メソッドとは。 Node.cloneNode() メソッドは、コピーノードの生成です。 例えば、あるノードをそのまま appendChild() メソッドなどで複数箇所に挿入しようと
十二章第一回 classList — JavaScript初級者から中級者になろう — uhyohyo.net
十二章第一回 classListこのページの最終更新日：2017年9月20日 この章のテーマはHTML5です。HTML5は新世代のHTMLで、2010年代に入ってから普及が始まりました。この講座を最初に書いた当時はHTML5は最先端の技術でしたが、何回かの改稿を経た今（2017年9月）となってはごく当たり前の技術となっています。 この章ではHTML5に関連する内容を解説します。というのも、HTML5の策定に伴ってHTML用のDOMにも新しくて便利な仕様が加えられました。 HTML5がよく分からないという人は、昔書いたHTML5講座も合わせて読むといいでしょう。 また、この章では、HTML5とは直接の関係が無いもののHTML5の時代に出現してきたような新しいAPIについても解説していきます。 さて、今回まず紹介するのはclassListです。これは非常に便利です。名前から想像がつくかもしれま
HTML 要素にクラスを付与したり削除したりするのに便利なユーティリティメソッド (JavaScript) - vivid memo
HTML5 における HTMLElement#classList HTML5 では、HTML DOM の HTMLElement インターフェイスに classList というプロパティ が追加される予定です。 このプロパティは W3C DOM 4 の DOMTokenList インターフェイス を実装したオブジェクトを参照しており、このリストに値を追加したり、このリストから値を削除すると、要素のクラス属性に反映されます。 つまり、HTMLElement#classList を使うことで、要素にクラスを追加したり削除したりすることが簡単にできます。 詳細は MDN あたりが分かりやすいと思います。 element.classList - MDN しかしながら、現在のところ HTMLElement#classList が使える環境は多くはありません。 Firefox 7 や Opera 11
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
GM_xmlhttpRequestのresponseTextをDOMとして扱ってみるテスト - natu_nの日記
書籍詳細ページのテーブル内の特定のTDだけ持ってきたいときに、ただのテキストデータだとかなりトリッキーなことをしなければならないので面倒だなと思いつつ思っただけで放置していたが、思い出したので調査 ざっくり検索して、quaaさんの[id:quaa:20060824#p1]を参考にしてテストしたが、shift-jisなデータが文字化けしxmlの中で文字コードを宣言しても変わらず。 更に調査して、nazokingさんの[id:nazoking:20050913:1126549126]にたどり着く、うーんGreasemonkeyに手を入れるのか…とは思いつつ修整し見事成功 所蔵図書館のテーブルを差し込むのに 〜 略 〜 var sdid = result[0].match(/[0-9]+/); var xsl = (new DOMParser()).parseFromString([ '<?xm
DOMメソッド｜DOM（Document Object Model）: Element｜JavaScript/DOM｜PHP & JavaScript Room
<form action="#"> <select id="pulldown"> <option value="" selected>---------</option> </select> <input type="button" value="プルダウン生成" onclick="fCreatePulldownMenuA()" /> </form> <script type="text/javascript"> function fCreatePulldownMenuA(){ var todofuken=["---------","北海道","本州","四国","九州","沖縄"]; var selObj=document.getElementById("pulldown"); var length=selObj.childNodes.length-1; if(length>0){ /*
IEでのgetAttribute,setAttributeのバグ
DOMでオブジェクトを特定したり、変更するのに使用するgetAttribute、setAttributeメソッドですが、一部IEにバグがあります。 以前散々悩んだので書いておきます。 たとえば、class名を取得したいとき、 element.getAttribute("class");だと、IEでは取得できません。 IEの場合には element.getAttribute("className"); getAttribute("String")のStringには属性名がくるので、実際にはclassが正しいのですがIEのバグです・・・ また、同様に element.setAttribute("style", "color: #ffffff;");もIEではセットできないので、 element.style.cssText = "color: #ffffff;"; とする必要があります。 さらに
setAttribute メソッドを使用したとき、IEでは簡単にイベントハンドラを設定できない話 - A Better Project＠はてなダイアリー（インポート版）
過去エントリであるIEでDOMで生成したbutton(input要素)のイベントハンドラ（onClick）が正常に動作しないの続きです。半年前のエントリですが。 この問題に関しては、IE の getAttribute / setAttribute: Days on the Moonでも解説されているのですが、初心者にはさっぱりわかりません。私も過去エントリを書いたときに、上記ページを見つけていたのですが、スクリプトの意味がさっぱりわからず、最近になって、やっとわかりました。以下、私なりに解説します（ただし、エントリタイトルにあるように、setAttributeでイベントハンドラを設定する話限定です）。 setAttribute メソッドでイベントハンドラ（onclickとかonmouseoverとか）を設定しようとするとき、IE以外のブラウザでは、以下で問題ありません。 element.s
タグの属性値を操る
Aタグのhref属性やIMGタグのsrc属性など、HTMLの見た目をダイナミックに変更する属性値の操作を解説。きっと実践で役立ちます。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。 前回の「NodeListの活用にはご注意を」では、HTML上のタグ要素にアクセスする手法を学習しました。 これまでは、HTMLに存在する要素を読み取るだけでした。これからはタグの属
たのしいXML: DOMとJavaScript
たけち: 前回は、歌(poemノード)がひとつだけの、簡単なXMLドキュメントを読んで見たよね。使ったDOMはdocumentElementとnodeNameだけだったね。 さらら: えぇ、まだまだ慣れないところはあるけれど雰囲気は分かったわ。 たけち: 今回は、子ノードを調べるインターフェイスを中心にお話しようね。 さらら: は～い。たのしみだわ。。。 たけち: その前に、今回使うXMLドキュメントを載せておこうね。前回よりちょっとだけ構造が変わっているよ。最初にリストを見てみよう。 XMLドキュメントサンプル poems.xml <?xml version="1.0" encoding="Shift_JIS"?> <manyosyu volume="1"> <poem> 熟田津(にきたつ)に船乗りせむと月待てば、潮もかなひぬ、今は漕ぎ出でな </poem> <poem> 茜(あかね)さ
＠IT：XMLマスターへの道 第8回 XMLマスター模擬試験：DOM
XMLマスターへの道 ～「XMLマスター：ベーシック」試験対策～ 第8回 XMLマスター模擬試験：DOM 福内 かおり・木村 達哉 2003/7/9 本記事は、＠ITハイブックスシリーズ『XML技術者認定試験「XMLマスター ラーニングブック」－ベーシック 編－』（技術評論社）から、許可を得て一部を転載したものです。同書籍に関する詳しい情報については、本記事の最後に掲載しています。 XMLマスターの模擬問題を中心にお届けしてきた「特別編」は今回が最後です。次回からは、通常の解説に戻ります。模擬問題は＠ITハイブックスシリーズ『XML技術者認定試験「XMLマスター ラーニングブック」－ベーシック 編－』から抜粋してお届けしていきます。 今回は、第6章「DOM」から、DOMに関連する問題を紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.removeChild() メソッド(指定した子ノードの除去) - JavaScript リファレンス
第5回 DOMを使ってHTMLを自由自在に書き換える：ITpro