JAVA_Web - 【JavaScript】Bom與Dom

目錄

  • bom
    • window
    • location
    • history
  • dom
    • 三種節點
    • 獲取/設置屬性
    • 查看是否有子節點
    • 獲取所有子節點
    • 創建並添加節點
    • innerHTML和innerText


<一> bom(Browser Object Model)

1> window對象[全稱window.方法()]
	彈框
		提示框 alert
		確認框 confirm
		輸入框 prompt
	open方法(開啓一個新頁面)
		open("http:www.baidu.com");
			和location.href="URL"比較(這裏是當前頁跳轉)
	定時器
		一次後停止
			setTimeout(函數,毫秒時間);
		反覆進行
			setInterval(函數,毫秒時間);
		定時頁面跳轉:
			  <body>
					恭喜您註冊成功,
					<span id="second" style="color: red;">5</span>秒後跳轉到首頁,
					如果不跳轉請<a id="stop_jump" href="javascript:void(0);">點擊這裏</a>
			  </body>
			  
			  <script type="text/javascript">
					var time = 5;
					var timer;
					timer = setInterval(function(){
						var second = document.getElementById("second");
						if(time>=1){
							second.innerHTML = time;
							time--;
						}else{
							clearInterval(timer);
							location.href = "bookStore1.html";
						}
					},1000);
					
					var stop_jump = document.getElementById("stop_jump");
					stop_jump.onclick = function(){
						event.preventDefault();
						clearInterval(timer);
					};
			  </script>


2> location對象
	location.href = "";
	
3> history對象
	history.go(-1);
	history(1);

<二> dom(Document Object Model)

<a id="jump" name="top" href="http://www.baidu.com">Click</a>

1> 三種節點與屬性

元素節點1
	var node = document.getElementById("id");
	var node = document.getElementsByName("top");
	var node = document.getElementsByTagName("a");
屬性節點2
	var att_node = node.getAttributeNode("href");
	attr_node.nodeName
	attr_node.nodeType
	attr_node.nodeValue
文本節點3
	var text_node = node.firstChild/lastChild;
	text_node.nodeName
	text_node.nodeType
	text_node.nodeValue

2> 基本操作

獲取、設置屬性
	node.getAttribute(key)
	node.setAttribute(key,value)

	
查看是否有子節點:hasChildNodes();

獲取所有子節點:ChildNodes;

創建並添加節點
	var a = document.createElement("span");  //<span></span>
	var text_node = document.createTextNode("Hello");  //Hello
	a.appendChild(text_node);    //<span>Hello</span>


使用innerHTML:
	a.innerHTML = "<h1>Hello</h1>"
使用innerText:
	獲取內部所有文本

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章