JavaScriptの基礎4 ウィンドウオブジェクト、DOM_基礎知識

他的属性也很丰富，因为我很懒，我就直接复制手册里的东西了：

closed	获取引用窗口是否已关闭。
defaultStatus	设置或获取要在窗口底部的状态栏上显示的缺省信息。
dialogArguments	设置或获取传递给模式对话框窗口的变量或变量数组。
dialogHeight	设置或获取模式对话框的高度。
dialogLeft	设置或获取模式对话框的左坐标。
dialogTop	设置或获取模式对话框的顶坐标。
dialogWidth	设置或获取模式对话框的宽度。
frameElement	获取在父文档中生成 window 的 frame或 iframe 对象。
length	设置或获取集合中对象的数目。
name	设置或获取表明窗口名称的值。
offscreenBuffering	设置或获取对象在对用户可见之前是否要先在屏幕外绘制。
opener	设置或获取创建当前窗口的窗口的引用。
parent	获取对象层次中的父窗口。
returnValue	设置或获取从模式对话框返回的值。
screenLeft	获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop	获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
self	获取对当前窗口或框架的引用。
status	设置或获取位于窗口底部状态栏的信息。
top	获取最顶层的祖先窗口。

これらは単なるウィンドウのプロパティです。さらに多くのイベントやメソッドもありますが、ここでは、特定の効果を実現したいが、アイデアがわからない場合に使用するために、このクラスに焦点を当てます。開始方法として、私たちの素敵なウィンドウ クラスについて考えてみましょう。おそらく、必要な機能が含まれています。

body 要素は、次のウィンドウ オブジェクト イベントのホストとして機能します: onblur、onbeforeunload、onfocus、onload、onunload。

以下では、ウィンドウを使用してページを離れるときにプロンプ​​トを作成します:

通常、ページを離れるときにプロンプ​​トが表示されます。たとえば、退出を確認するかどうかなどは、実際には body ノードに次の文を追加するだけです。

その場合、終了時にメッセージが表示されます。

この例では、次の 3 つの点に注意します。

return 'xxxxx' はセミコロンの有無にかかわらず記述する必要があります。文字列のみを記述する場合、プロンプトは表示されません。
前に強調した問題は、onbeforeunload イベントの後に二重引用符があるため、戻り値を一重引用符で囲む必要があることです。
この文は FF、chrome、IE で有効です。chrome と IE のトリガー メカニズムは同じです。確認バーに戻り文字列を書き込みます。ユーザーが閉じるボタンをクリックして onbeforeunload オブジェクトをトリガーすると、onbeforeunload オブジェクトの戻り値が文字列の場合、上向きに警告が発行され、その文字列が表示されるという処理になると思います。 。ただし、FF では異なり、デフォルトの警告のみが表示されます。

Chrome に次のプロンプトがあります:

返された文は、IE と同じ効果でナビゲーションの上に表示されます (IE が表示されない場合は、クリックしてスクリプトの実行を許可します)。

FFの場合は、書いた文章とは関係のない上位レベルのプロンプトのみが表示されますが、それでも書かないとFFではプロンプトが表示されません。

それで、確認ボックスを独自のもので表示させたい場合、何度も試してみましたが、FF はデフォルトのボックスを他のダイアログ ボックスで置き換えることができないことがわかりました。そのため、サイレントに確認を追加することしかできませんが、この場合は FFプロンプトが 2 回表示されます。 IE と Chrome の両方で、関数の戻り文字列が終了プロンプトに入力されます。これは適切です。以下は、1 階からのフィードバックを経て変更されたコードです。

テスト後、このコードは chrome 16.0.912.0 でのみプロンプトを表示しますが、一部の chrome ベースのブラウザ (sunchrome など) では FF と chrome の二重プロンプトが表示されます。これは、これらのブラウザに他のカーネルが含まれているためだと思われます。削除されましたが、何が起こっているのかよくわかりません。

とにかく、連絡してください~ねえ~

コードをコピーしてください コードは次のとおりです:

>テスト中


那个方法一的意思是：如果在这里写了这个节点，那么IE运行的时候就会运行这个部分的代码，但是如果没有这个节点，那么这段代码在FF和chrome正常，但是在IE里，会出现两个提示都出现的情况，这是因为它既会执行window.confirm这句，也会返回chrome那句。

以下是上面代码在各浏览器的测试：

哈哈，怎么样，不错吧~
好，接下在就是万众期待(其实只有LZ期待吧= =+)的DOM

DOM的全称是document object model，怎么理解这个东西挺关键的，我看了不少定义，有的说它是个平台，有的说它是个接口，anyway，我打开了它的官方guide网站：http://www.w3.org/DOM/

它对DOM的定义是：

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

我来简单翻译下好了：DOM是个平台/语言的中间接口，它可以允许程序和脚本动态的访问和更新内容、架构以及文件style。文件可以被进一步处理并将结果返回到显示页面。

其实这么说我看了也还是云里雾里，所以可以这么理解，DOM是个大家为了编程方便，传输速度快而统一起来的，基于树规范，它跟浏览器是没有关系的。DOM的基本思想就是树形结构，比如HTML文件，就是一个树形结构。DOM是没有跟任何语言绑定的，我们利用js可以对html dom进行动态的修改。

DOM有三个级别，可以分为:core Dom, XML DOM(*), HTML DOM三部分。中间那个是作为文档传输标准，使用很广泛的，但是这里就着重讲HTML DOM。

DOM把文档分为带有：元素、属性、文本 的树形结构，然后将这些作为结点来构造文档的树形结构，这样，就可以通过一个结点访问到所有的结点。

之前给出的那个网站（http://www.jb51.net/w3school/js/jsref_obj_string.htm）里面有比较全的DOM的玩意儿，可以用来参考，但是用来做教程还是有点生硬。

我打算先介绍节点类型，然后再对应到代码里。

节点类型介绍(复制来自http://www.jb51.net/w3schools/jsref/dom_obj_node.htm)

Node type	Description	Children	Value	Constant
Element	Represents an element	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference	1	ELEMENT_NODE
Attr	Represents an attribute	Text, EntityReference	2	ATTRIBUTE_NODE
Text	Represents textual content in an element or attribute	None	3	TEXT_NODE
CDATASection	Represents a CDATA section in a document (text that will NOT be parsed by a parser)	None	4	CDATA_SECTION_NODE
EntityReference	Represents an entity reference	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	5	ENTITY_REFERENCE_NODE
Entity	Represents an entity	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	6	ENTITY_NODE
ProcessingInstruction	Represents a processing instruction	None	7	PROCESSING_INSTRUCTION_NODE
Comment	Represents a comment	None	8	COMMENT_NODE
Document	Represents the entire document (the root-node of the DOM tree)	Element, ProcessingInstruction, Comment, DocumentType	9	DOCUMENT_NODE
DocumentType	Provides an interface to the entities defined for the document	None	10	DOCUMENT_TYPE_NODE
DocumentFragment	Represents a "lightweight" Document object, which can hold a portion of a document	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	11	DOCUMENT_FRAGMENT_NODE
Notation	Represents a notation declared in the DTD	None	12	NOTATION_NODE

これを理解した後、小さな HTML ファイルを使用して DOM のツリー構造を表示します。
HTML テキスト

コードをコピー コードは次のとおりです:

;
ここをクリック


;


ツリー構造解析

追伸: 理論的には br はノードではありませんが、知っている人が教えてくれると幸いです。
1. ファイルは常にルート ノードです。ドキュメント ノードを取得するには、document.documentElement または document.body を直接使用します。
2.script もコメントを含めてノードです。 3. ノードの名前は、タイトルと似ており、ノードの tagName です。
あるノードから他のノードを取得する方法は、上方向、下方向、または平行方向に過ぎません。詳しくは、上記の Web サイトの DOM Node オブジェクトのプロパティとメソッドを確認してください。さまざまな意見。 (上記の多くは IE では利用できません。テスト後に使用方法を検討する必要があります。)
DOM 内のノードのさまざまなメソッドを大まかに確認した後、小さなアプリケーションを作成します。
ユーザーをクリックすると、開いたサブオプションまたは閉じたサブオプションを追加できます。




コードをコピー

コードは次のとおりです。 head>