Javascriptの研究ノート（DOM、BOMオブジェクト）

その他 2020-03-23 19:46:14 訪問数: null

DOM（ドキュメントオブジェクトモデル）オブジェクト

  • DOMオブジェクトは、ドキュメントオブジェクトモデルをアクセスするための標準的な方法を定義し、HTMLドキュメント、要素、属性、およびテキストを構造体として提示HTML DOMドキュメントを操作であり、その構造は、ツリー構造に似ています。
  • DOMモデルでは、すべてのコンテンツページは、オブジェクト、タグ、属性、テキストなどと考えています。
  • ときにブラウザがロードページのすべてのノードは、WebページのDOMオブジェクトにアクセスすることができた後、ブラウザは、現在のページのドキュメントオブジェクトを（つまり、DOMオブジェクト）を作成します。

次のようにWebページオブジェクトは、DOMノードに解析され
ここに画像を挿入説明

  1. 要素ノード<HTML>、<BODY>、<P>、<A>等上図は、これらのラベルは、ノード要素です。

  2. Textノード：ページのコンテンツには、タイトル、テキスト<P>タグなどなど、CSSのテキストコンテンツ上のタイトルを示しています。

  3. 属性ノード：ノードの属性は、要素の属性ノード、<A>のタグのhref属性、<input>タグのプロパティ値などと呼ばれます。

ノードの操作

  • DOMオブジェクトノードにHTMLコードを取得します。

 //通过元素节点id获取节点
 document.getElementById();

 //通过结点的tag名称获取节点
 document.getElementsByTagName();
 
 //通过节点的名称获取，返回一个同样节点名称的数组
 document.getElementsByName();

ノード要素によって、親ノードを取得します（既存のノードnodeObj）

  • nodeObj.firstChild：ノードが現在のノードの最初の子ノードである場合には、このメソッドを使用することができます。このプロパティは、親ノードの最初の子ノードへのアクセスは、nodeObj.firstChild.firstChild.firstChild ...フォームの子ノードを使用して最初の子ノードを取得し続けることができ、再帰的に実装することができます。
  • nodeObj.lastChild：最後の子の（parentObj）取得明らかに、このプロパティは知られているノードは、キャビネットは、最初のノードを同じ方法で取得するために使用されます。
  • nodeObj.childNodes：（所望のノードを見つけることをループ）、アレイを処理することができ、ノードを既知のすべての子ノードの配列を取得します。
  • nodeObj.children：後処理により、ノード配列の直接の子ノードを知ら取得します。
  • nodeObj.getElementsByTagName（）：現在のノードの子配列の値の指定されたノードのすべてのサブタイプ

（ノード既存nodeObjを）兄弟によってノード要素を取得します。

  • nodeObj.nextSibling：次の兄弟を取得
  • nodeObj.previousSibling：最後の兄弟を取得

（ノード既存nodeObjを）兄弟によってノード要素を取得します。

  • nodeObj.parentNode：知られているノードの親を取得します

ノードを作成します

  • 要素ノード：のdocument.createElement（tagNameを）。

  • テキストノード：document.createTextNode（テキスト）;

  • プロパティ：node.setAttribute（名前、値）;

追加のノード（親のparentNode）

  • parentNode.appendChild（子ノード）。

  • parentNode.insertBefore（newnode、oldNodeが）、

  • parentNode.replaceChild（newnode、oldNodeが）。

重複削除ノード（ノードのparentNodeのcopyNode /親ノードにコピーされます）

  • copyNode.cloneNode（真/偽）

    ディープコピーがtrueで、ノードとすべての子ノードがすべて複製されている
    （属性を含む）のみをコピーし、現在のノード：光として偽のコピー

  • parentNode.removeChild（パラメータ）

プロパティの操作

  • プロパティ値のノードを取得します。
  1. itnode：属性名
  2. itnode.getAttribute（プロパティ名）

  • ノードの集合属性値

    1.itnode。属性名=属性値のセット

    2.itnode.setAttribute（名前、値）。

//代码中只演示了部分操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js练习</title>
		
		<script type="text/javascript">
			
			function funt1(){
				// 1.獲取元素结点
				var code1 = document.getElementById('demo1')
				// 2.对该结点进行操作
				code1.style.backgroundColor = 'blueviolet';
				// code1.style.size = 20px;
			}
			
			// document.getElementsByTagName(tag标签名称); 
			function funt2(){
				// 1.获取元素结点
				var code2 = document.getElementsByTagName('li');
				// 访问具体元素结点
				code2[0].style.backgroundColor = 'red';
				code2.item(1).style.backgroundColor = 'yellow';
			}
			
			// document.getElementsByName(name属性值);
			function funt3(){
				var code3 = document.getElementsByName('demo3');
				code3.item(0).style.fontSize = '25px';
				code3[0].style.backgroundColor = 'green';
			}
			
			// innnerHTML
			function funt4(){
				// 获取div结点
				var code4 = document.getElementById('demo4');
				// 重新设置一个html属性
				code4.innerHTML = '<h2>那都不是事..........</h2>';
			}
			
			function funt5(){
				// 获取li对象
				var code5 = document.getElementsByTagName('li');
				var one_code = code5[0];
				// 找出第一个li的下一个<li>
				one_code.nextElementSibling.style.backgroundColor = 'red';
				// 找出第二个li的上一个li
				var two_code = code5[1];
				two_code.previousSibling.style.fontSize = '50px';
			}
			
			function funt6(){
				// 获取结点
				var code6 = document.getElementsByTagName('li');
				var one_code1 = code6[0];
				one_code1.parentNode.style.fontSize = '50px';
			}
			
			function funt7(){
				var code7 = document.getElementsByTagName('a')[0];
				console.log(code7);
				console.log('链接'+code7.href);
				console.log('提交方式'+code7.method)
			}
		</script>
	</head>
	<body>
		<!--<di v id="demo1">窗前明月光</div>
		<div id="">意识地上霜</div>
		<input type="button" value="获取结点" onclick="funt1()" />
		 -->
		<!-- 
		<div>
			<ul>
				<li>如果努力有用的话</li>
				<li>还要天才干什么？</li>
				<li>...........</li>
			</ul>
			<input type="button" value="点我点我" onclick="funt2()" />
		</div>
	 -->
		<!-- 
	 <ul>
		 <li name='demo3'>窗前明月光</li>
		 <li nmae='demo3'>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
 -->	 
		<!-- 
	<div id="demo4"></div>
	<p>>>>>>>>:</p>
	<input type="button" value="点我点我" onclick="funt4()" />
	 -->
	 
	 
	 <ul>
		 <li>床前明月光</li>
		 <li>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
	 
	 <a href="www.baidu.com">百度</a>
	 <a href="www.taobao.com">淘宝</a>
	 <input type="button" value="点我点我" onclick="funt7()" />
	</body>
</html>

BOM（ブラウザオブジェクトモデル）オブジェクト

windowオブジェクトに依存しているために、ブラウザのオブジェクトモデルは、ブラウザのウィンドウとページ表示領域を表します。

ウィンドウオブジェクト

  • window.alert（）
    ポップアップ警告ボックス

  • window.confirm（）
    ポップアップ確認ボックス

  • window.prompt（）
    ポップアップ入力ボックス

  • window.open（「URLアドレス」、「_黒または_self」、「新しいウィンドウのサイズ」）は
    、新しいウィンドウを開きます

  • 近い（）
    現在のページを閉じます

タイマ、クリアタイマー

  • setTimeoutメソッド（関数、時間）
    タイマー

  • setInterval（機能、時間）
    遅延

  • clearTimeout（タイマ値が返される）
    をクリアタイマー

ロケーション・オブジェクト

  • location.herf = 'URLアドレス'
  • サーバーのホスト名とポート番号を返します。
  • ファイル名やディレクトリのパス名を返します。
  • 戻り値は、ポート番号などURLで指定したポートのポート番号は、URLが空の文字列を返します含まれていません。
  • 使用されるプロトコルにportocolバックは、http：/ HTTPS：

ナビゲーターは、オブジェクト
-ブラウザのバージョン情報を参照してください

画面オブジェクト

  • 高さ：高画面全体を取得します。
  • 幅：画面の幅全体を取得します。
  • availHeight：の高い画面全体のシステム・コンポーネントを差し引きます
  • availWidth：画面全体を減算することにより、システム構成要素の幅幅

//对上述的部分对象属性方法进行使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3</title>
		<!-- 作业三：将作业1，2合并为一到题。计数器数字能被3整除变换背景颜色，数字能被8整除自动打开页面，页面计数到5自动关闭页面 -->
		<script type="text/javascript">
			
			// 定义一个计数器的初始值
			var initial=0;
			// 计数器计数函数
			function start_count() {
				// 获取input对象
				var input_obj = document.getElementById('count');
				// 通过对象获取input对象的value属性
				input_obj.value = '该计数器的值是'+initial;
				// 计数+1
				initial=initial+1;
				// 判断当计数器的值为30时弹出窗口自动关闭网页(自己加了一个提示网页关闭的弹窗)
				if (initial % 3 == 0){
					setTimeout('funt_color()',1000);
					setTimeout("start_count()",1000);
				}else if(initial % 8 == 0){
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
				}else if (initial % 3 ==0 && initial % 8 == 0){
					setTimeout('funt_color()',1000);
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
					console.log('你好啊..........')
				}else{
					setTimeout('start_count()',1000);
				}
			}  
			
			//定义一个打开页面的函数
			function open_win(){
				// 新窗口的url
				var win_url = '';
				// 窗口名称
				var win_name = 'window新窗口'
				// 新窗口的属性值
				var win_width = 600;
				var win_height = 400;
				var screen_width = screen.width;
				var screen_height = screen.height;
				var x = (screen_width-win_width)/2;
				var y = (screen_height-win_height)/2-50;
				var options = "width="+win_width+",height="+win_height+",left="+x+",top="+y;
				win_obj = window.open(win_url,win_name,options);
				//新窗口在5秒钟后，自动关闭
				win_obj.setTimeout("window.close()",5000);
			} 
			
			var color_str = '#';
			// 定义随机背景函数
			function funt_color(){
				/*随机产生十六进制的颜色值*/
				var arr_color = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
				// 循环从列表中拿取6次，取到6个不同的值
				for(var i = 0; i < 6; i++)
				{
					// 产生一个1---------16之间的整数，作为下标，去数组中取值
					var random_color = Math.floor(Math.random()*16);
					// 产生的随机数*16,所以取不到0，所以随机数-1
					color_str += arr_color[random_color-1];
				}
				// 将rgb颜色表示弹出来
				// document.write('<h3 style="text-align: center;">16进制颜色表示为:'+color_str+'</h3>');
				// 设置背景
				document.body.bgColor = color_str;
			}
			  
		</script>
	
		<!-- 计数器显示的input框的样式 -->
		<style type="text/css">
			input {
				width: 200px;
				height: 50px;
				text-align: center;
				font-size: 20px;
				line-height: 50px;
				margin: 50px 42%;
			}
		</style>
	</head>
	<!-- 给body绑定网页打开自动触发函数 -->
	<body onload="start_count()">
		<input type="button" id="count" value="该计数器的值是0"/>
	</body>
</html>
セブンイレブンディアン
公開された63元の記事 ・ ウォンの賞賛1 ・ ビュー2033
プライベートの手紙の 懸念

おすすめ

転載: blog.csdn.net/qq_45061361/article/details/104410768
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com