JavaScript---DOM基礎知識(三)動的作成ラベル

2962 ワード

javascript DOM BOM

JavaScriptはウェブページの構造と内容を変えるだけでなく、新しい要素を作成し、既存の要素を修正することによってウェブページの構造を変えることができます.
DOM法を利用してウェブブラウザにマークを追加することを学ぶと、しばしばDcument.write()とelement.innersHTML方法が考えられますが、この2つの方法は推奨されません.
この2つの方法はいずれも右の共通の弊害です.構造、様式、行為は分離されていません.
たとえば:



    
    
    
    Document


    
    document.write("<p>hello world</p>")

document.write()文を外部関数に移しても、中にラベルを入れてからこの関数を呼び出すことができます.ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;上のようにJavaScriptとHTMLコードを融合させるのはよくないやり方です.このようなコードは読みにくく編集もできないし、スタイルも分離できないです.ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;構造()lt;span style=「font-size:18 px;」gt;スタイル(css)、行為(js)は常に最適な原則であり、可能性がある限り、CSS外部ファイルを最大限に使用し、JavaScript外部ファイルでウェブページの動作を制御する.ボルトspant>lt;bragt;ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;innerHTML属性はHTML特有の属性であり、他のタグ言語には使用できません.innerHTMLは「ハンマー」であり、一部のHTMLコンテンツを使用してドキュメントに挿入されます.ボルトspant>ボルトp>
lt;span style=「font-size:18 px;」gt;DOMメソッド作成ラベル</spant>ボルトp>
lt;span style=「font-size:16 px;」gt;DOMメソッドの本質は、DOMノードツリーを変更することであり、ブラウザから見ると、DOMノードツリーこそドキュメントである.ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;実質はマークを作成するのではなく、ノードツリーを修正することが、DOMの観点から問題になる.DOMでは、ノードツリーにコンテンツを追加するには、ノードを追加します.ドキュメントにマークを追加する場合は、要素ノードを挿入します.ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;一.createElement方法</spant>ボルトp>
lt;span style=「font-size:16 px;」gt;文法:document.creat Elementボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;p元素を作成します.document.creat Element("p").</spant>ボルトp>
lt;span style=「font-size:16 px;」gt;二.apendChildの方法</spant>ボルトp>
lt;span style=「font-size:16 px;」gt;文法:parent.apendChild;ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;私たちは新しい要素を作成しただけですが、ノードツリーには追加されていません.新しいノードをノードツリーに挿入する一番簡単な方法は、この新しいノードを既存のノードのサブノードにすることです.ボルトspant>ボルトp>
lt;span style=「font-size:16 px;」gt;例:はい<body>に<を追加しますp>ボルトspant>ボルトp>
<pregt;lt;code class=「langage-」&ボルトDOCTYPE htl>
<html lang="en">
<headt>
<meta charset=「UTF-8」gt;
<meta name=「viewport」content=「width=device-width、initial-scale=1.0」gt;
<meta http-equiv=「X-UA-Comppatible」content=「e=edge」gt;
<タイツ>Dcument</タイツ>
<headt>
<body>
<div id="box"ボルトdiv>
<script type="text/javascript"
var pEle=document.creat Element("p")
pEle.inners="hello world"
var box=document.getElemenntById(「box」)
box.apendChild(pEle);

JS対象の件