JavaScript HTML DOM 元素

阿新 • • 發佈：2019-01-15

DOM是文件物件模型；具有賦予js操作節點的能力。

A、查詢元素：

1、通過 id 找到元素

var oBtn=document.getElementById("btn");

2、通過標籤名找到元素

var oBtn=document.getElementById("btn");
var aText=oBtn.getElementsByTagName("text");

3、通過類名找到元素

var oUl=document.getElementsByClassName("li");

注意：通過類名獲取元素在IE6-8不相容

B、DOM節點
節點分成兩種：文字節點，元素節點。
1.1、childNodes

：可找到的是文字節點與元素節點；這時可用nodeType來判斷節點型別，然後再控制子節點。
例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>childNodes與nodeType的使用</title>
		<script type="text/javascript">
			window.onload=function(){
				var oList=document.getElementById('list');
				var num=0;
				for(var i=0;i<oList.childNodes.length;i++){
					//nodeType==3 是文字節點
					//nodeType==1 是元素節點
					if(oList.childNodes[i].nodeType==1){
						num++;
						oList.childNodes[i].style.background='red';
					}
				}
				
				console.log(num);
				
			}
		</script>
	</head>
	<body>

節點分成兩種：文字節點，元素節點，大部分情況，我們只要元素節點。

1.2、children：也可以獲取子節點（元素節點），而且相容各種瀏覽器。包括IE6-8，因此較常用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>children的使用</title>
		<script type="text/javascript">
			window.onload=function(){
				var oList=document.getElementById('list');
				var ochild=document.getElementById('child');
				//oList.children  父節點.子節點
				//console.log(oList.children.length);
				
				//通過子節點查詢父節點的方式
				console.log(ochild.parentNode);
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li id="child"></li>
			<li></li>
		</ul>
	</body>
</html>

2.1、獲取父節點：parentNode

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8">
		<title>parentNode的使用</title>
		<script type="text/javascript">
			window.onload=function(){
				var oUl=document.getElementById('list');
				var aBtn=oUl.getElementsByTagName('a');
				
				for(var i=0;i<aBtn.length;i++){
					aBtn[i].onclick=function(){
						this.parentNode.style.display='none';
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>恭喜發財<a href="javascript:">刪除</a></li>
			<li>恭喜發財<a href="javascript:">刪除</a></li>
			<li>恭喜發財<a href="javascript:">刪除</a></li>
			<li>恭喜發財<a href="javascript:">刪除</a></li>
		</ul>
	</body>
</html>

3、offsetParent：絕對相對定位後的父節點。沒有相對定位盒子，則父節點是body。

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>無標題文件</title>
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: #CCC;
				margin: 100px;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv2 = document.getElementById('div2');
				alert(oDiv2.offsetParent);
			};
		</script>
	</head>

	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>

4、首尾子節點
4.1、首部子節點：
firstElementChild;其他瀏覽器；
firstChild：IE瀏覽器；

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>無標題文件</title>
		<script>
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				if (oUl.firstElementChild) {
					oUl.firstElementChild.style.background = 'red'; //非IE6-8瀏覽器
				} else {
					oUl.firstChild.style.background = 'red'; //IE6-8
				}
			};
		</script>
	</head>

	<body>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>

</html>

4.2、尾部子節點
lastElementChild：其他瀏覽器；
lastChild：IE瀏覽器；

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>無標題文件</title>
		<script>
			window.onload = function() {
				function lastElementChild(ele){
					if(ele.lastElementChild){
						return ele.lastElementChild;//其他
					}
					else{
						return ele.lastChild;//IE
					}
				}
				
				lastElementChild(oList).style.background='red';
			}
		</script>
	</head>

	<body>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>

</html>

C圖片無縫滾動

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			#box{
				height: 464px;
				width: 185px;
				border: 1px solid #000;
				margin: 100px;
				position: relative;
				overflow: hidden;
			}
			#box ul{
				position: absolute;
				left: 0;
				top: 0;
			}
			#box ul li{
				float: left;
				width: 185px;
				height: 116px;
			}
			#box ul li img{
				display: block;
				width: 185px;
				height: 116px;
				
			}
			#direction p{
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: green;
				color: #fff;
				float: left;
				margin-right: 5px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBox=document.getElementById('box');
				var oUl=oBox.getElementsByTagName('ul')[0];
				var aLi=oUl.getElementsByTagName('li');
				var oTotop=document.getElementById('to_top');
				var oTobottom=document.getElementById('to_bottom');
				
				var speed=-2;
				oUl.style.height=aLi[0].offsetHeight*aLi.length+'px';
				oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
				
				
				function totop(){
					if(oUl.offsetTop<-oUl.offsetHeight/2){
						oUl.style.top='0';
					}
					if(oUl.style.top>0){
						oUl.style.top=-oUl.offsetHeight/2+'px';
					}
					oUl.style.top=oUl.offsetTop+speed+'px';
					
				}
				
				oTotop.onclick=function(){
					speed=-2;
				}
				oTobottom.onclick=function(){
					speed=2;
				}
				
				setInterval(totop,50);
			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/a1.jpeg" alt="" /></li>
				<li><img src="img/a2.jpeg" alt="" /></li>
				<li><img src="img/a3.jpeg" alt="" /></li>
				<li><img src="img/a4.jpeg" alt="" /></li>
			</ul>
			
		</div>
		<div id="direction">
			<p id="to_top">向上</p>
			<p id="to_bottom">向下</p>
		</div>
	</body>
</html>

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement 以下程式碼是用於建立 <p> 元素: var para = document.crea

JavaScript HTML DOM 元素

DOM是文件物件模型；具有賦予js操作節點的能力。 A、查詢元素： 1、通過 id 找到元素 var oBtn=document.getElementById("btn"); 2、通過標籤名找到元素var oBtn=document.getElementById("btn

JavaScript HTML DOM元素節點常用操作介面

在文件物件模型 (DOM) 中，每個節點都是一個物件。DOM 節點有三個重要的屬性： 1. nodeName : 節點的名稱

JavaScript HTML DOM+事件+節點與元素

1.HTML DOM (文件物件模型) 通過 HTML DOM，可訪問 JavaScript HTML 文件的所有元素。 1.JavaScript 能夠改變頁面中的所有 HTML 元素（1）查詢 HTML 元素：通過 id 找到 HTML 元素:document.getElem

JavaScript HTML DOM

文檔 pre tel mod 實例最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶按鈕 scrip 對事件做出反應我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

javascript--- HTML DOM

web post 動態頁面編程結構化認知部分方法 -- 看了這個題目，不知聰明的讀者會有什麽樣的感覺？這篇文章將要講javascript和DOM的關系呢？還是要講javascript的DOM?在這裏我首先就講明文章的主旨有兩點：什麽

JavaScript HTML DOM增刪改查

刪除 scrip color 沒有 id屬性 tag reat 添加 val 首先 js 可以修改HTML中的所有元素和屬性，它還可以改變CSS樣式，並且可以監聽到所有事件並作出響應，這篇筆記呢主要記錄如何對HTML元素進行增刪改查。 1 查找DOM 第一種方式是我

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子：當用戶點擊鼠標時當網頁已加載時當圖像已加載時當鼠標移動到元素上時當輸入字段

JavaScript HTML DOM EventListener

div color ner 多個 java quest on() 兩個 mousedown 1.JavaScript HTML DOM EventListener 1.addEventListener() 方法在用戶點擊按鈕時觸發監聽事件： document.getEl

前端開發之JavaScript HTML DOM理論篇二

parent paragraph app style document col () 刪除 create 主要內容：　　1、HTML DOM元素　　2、HTML DOM事件　　3、HTML DOM實例一、DOM元素　　主要操作有添加、刪除和替換HT

學習筆記-JavaScript HTML DOM

表單刪除 innerhtml 對象模型 ava img intro 元素 onload HTML DOM （文檔對象模型）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。 HTML DOM 模型被構造為對象的樹。 Java

JavaScript HTML DOM——改變HTML

文檔加載 ntb var color test 中國 ttr 改變 page 　　HTML DOM 允許 JavaScript 改變 HTML 元素的內容。 1、改變 HTML 輸出流　　JavaScript 能夠創建動態的 HTML 內容：　　今天的日期是： Sun

原生JS獲取HTML DOM元素的8種方法

JS獲取DOM元素的方法（8種）通過ID獲取（getElementById）通過name屬性（getElementsByName）通過標籤名（getElementsByTagName）通過類名（getElementsByClassName）

JS HTML DOM元素節點

要想建立一個元素節點，首先要建立一個新元素，然後在新元素中新增 1、appendChild（）尾部新增使用步驟：（1）新建型別（2）新增內容（3）組合節點（4）定位節點（5）新增節點程式碼示範： <div id="div1"> <p id="p1">這是第一個初始

JavaScript HTML DOM 物件

除了內建的 JavaScript 物件以外，你還可以使用 JavaScript 訪問並處理所有的 HTML DOM 物件。更多 JavaScript 物件點選以下連結，可以獲得以下物件的更多資訊，包括它們的集合、屬性、方法以及事件。物件

詳解JS獲取HTML DOM元素的8種方法

詳解JS獲取HTML DOM元素的8種方法什麼是HTML DOM 文件物件模型（Document Object Model），是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。簡單理解就是HTML DOM 是關於如何獲取、修改、新增或刪除 HTML 元素的標準。我們用Ja

Phaser遊戲框架與HTML Dom元素之間的通訊互動

本想按照PHASER的HTML Dom元素官方例項：http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q= 來建立HTML DOM元素，但this.add.dom 一直提示錯誤，無奈直接用HTML5的語法來建

JavaScript HTML DOM 元素

相關推薦