JS_02 (獲取節點，節點CURD)

獲取節點：（待補充）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>獲取節點</title>
	</head>
	<body>
		
		<a target="_blank" href="https://www.cnblogs.com/xiaoxian1369/p/3195382.html">通過父節點，臨近節點，子節點獲取</a><br />
		<a target="_blank" href="https://www.jianshu.com/p/039fc155c516">原生js獲取節點</a><br />
		
	<!--1.根據id獲取元素

document.getElementById("id屬性的值");

2.根據標籤名字獲取元素

document.getElementsByTagName("標籤的名字");

3.根據name屬性的值獲取元素

document.getElementsByName("name屬性的值");

4.根據類樣式的名字獲取元素 

document.getElementsByClassName("類樣式的名字");

5.根據選擇器獲取元素 

1.document.querySelector("選擇器");

2.document.querySelectorAll("選擇器"); -->


<div id = 'idM'>根據id獲取元素</div>
<div class="classM">根據class獲取元素</div>
<div  name  = 'nameM'>根據name名來拿</div>
<div> 根據內容獲取節點</div>
 <p>根據標籤名來拿</p>
 <div  type="button" value="顯示效果1" id="btn">根據id選擇器拿到標籤 (點擊一下) </div><br />
  <div  type="button" value="顯示效果2" class="btn">根據class選擇器拿到標籤 (點擊一下)  </div><br />
  <div id="six">666999666  (點擊一下)</div>
  
 <!--<button  type="button" value="顯示效果1" id="btn" >btn111111</button>
 <button type="button" value="顯示效果2" class="btn btn2222></button>-->
 <!--<input type="button" value="顯示效果1" id="btn"/><br />
<input type="button" value="顯示效果2" class="btn"/>-->

<br />

<button  id="btn1"> Change</button>
<input  type="text" value="111" class="text"/><br/>
<input    type="text" value="222" class="text"/><br />


	<script>
		
		//根據 id 獲取節點
	var divID = document.getElementById('idM');
	divID.style.backgroundColor = 'red';
	
	//根據classname獲取節點
	var classD = document.getElementsByClassName('classM')[0];
	classD.style.backgroundColor = 'orange';
	
	//根據name獲取節點
	var nameD = document.getElementsByName('nameM')[0];
	nameD.style.backgroundColor = 'green';
	
	//根據標籤名獲取節點
	var tagD = document.getElementsByTagName('p')[0];
		tagD.style.backgroundColor = 'blue';
		
   var six = document.querySelector('#six');
    six.onclick = function(){
    	six.innerHTML = '用選擇器拿去標籤成功';
    	six.style.backgroundColor = 'chartreuse';
    };
    
    
		
		 var btnObj1 = document.querySelector("#btn");
		 btnObj1.style.backgroundColor = '#FFFF00';
    btnObj1.onclick = function () {
//      alert("我變帥了");
btnObj1 .style.backgroundColor = 'chartreuse';
    };
    var btnObj2 = document.querySelector(".btn");
    		 btnObj2.style.backgroundColor = '#FFFF00';
    btnObj2.onclick = function () {
//      alert("哈哈,我又變帥了");
btnObj2 .style.backgroundColor = 'purple';
    };
    
    

    

	 //根據選擇器的方式獲取元素
        var inputs = document.querySelectorAll(".text");	
          inputs.value = '666';
		 document.getElementById("btn1").onclick = function () {
       
 
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "更改input 值 成功";
        }
    };

/*
1.節點（node）的分類

nodeName　　　　　　　　　　nodeValue　　　　　　　　　　nodeType

元素節點 標籤名　　　　　　　　null　　　　　　　　　　　　　　1nt

屬性節點屬性名　　　　　　　　屬性值　　　　　　　　　　　　　2

文本節點#text　　　　　　　　   文本值　　　　　　　　　　　　　3

註釋節點#comment　　　　　　 註釋內容　　　　　　　　　　　　 8

2.元素節點的4種獲取方式

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

var stt = document.getElementsByClassName("div")[0];　　　　[0]代表相同名字時第一個元素內容也就是父級元素下所有內容

詳細解釋：通過document.getElementsByClassName("div")獲取到name爲div的元素。[ n] n代表相同name情況下第幾個元素

3.獲取節點所有的子節點

console.log(stt.childNodes);

var sttChild = stt.childNode;

console.log(sttChild.nodeName//獲取節點的name,sttChild.nodeValue//獲取節點的值,sttChild.nodeType//獲取節點的類型)

4.獲取節點的屬性節點

var sttattr = stt.attributes;

注意當一個元素內有多個屬性 比如 id   class  style name  同時存在時 誰在前面先獲取誰

 節點的層次關係

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

stt.childNodes//獲取所有子節點

stt.firstChild//獲取第一個子節點

stt.lastChid//獲取最後一個子節點

兄弟關係

stt.previousSibling//獲取前一個兄弟的節點

stt.nextSibling//獲取下一個兄弟的節點

stt.ownerDocument //獲取根節點

*/

/*
 令人欣慰的是，運用JavaScript獲取節點的要領有很多種，這裏基本做一下總結：
1. 通過頂層document節點獲取
◆document.getElementById(elementId) ：該要領 通過節點的ID，可以準確獲得須要 的元素，是比較基本快捷的要領 。如果頁面上含有多個相同id的節點，那麼只返回第一個節點。
如今，已經出現瞭如prototype、Mootools等多個JavaScript庫，它們提供了更簡便的要領 ：$(id)，參數仍然是節點的id。這個要領 可以看作是document.getElementById()的另外一種寫法，不過$()的功能更爲強大，具體用法可以參考它們各自的API文檔。
◆document.getElementsByName(elementName) ：該要領 是通過節點的name獲取節點，從名字可以看出，這個要領返回的不是一個節點元素，而是具有同樣名稱的節點數組。然後，我們可以通過要獲取節點的某個屬性來循環判斷能不能爲須要的節點。
例如：在HTML中checkbox和radio都是通過相同的name屬性值，來標識一個組內的元素。如果我們現在要獲取被選中的元素，首先獲取改組元素，然後循環判斷是節點的checked屬性值能不能 爲true即可。
◆document.getElementsByTagName(tagName) ：該要領 是通過節點的Tag獲取節點，同樣該要領 也是返回一個數組，例如：document.getElementsByTagName('A')將會返回頁面上所有超鏈接節點。在獲取節點之前，一般都是知道節點的類型的，所以運用該要領比較基本。
但是缺點也是顯而易見，那就是返回的數組可能十分龐大，這樣就會浪費很多時間。那麼，這個要領是不是就沒有用處了呢？當然不是，這個要領和上面的兩個不同，它不是document節點的專有要領 ，還可以運用 其他的節點，下面將會提到。
2、通過父節點獲取
◆parentObj.firstChild ：如果節點爲已知節點（parentObj）的第一個子節點就可以運用 這個要領 。這個屬性是可以遞歸運用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以獲得更深層次的節點。
◆parentObj.lastChild ：很顯然，這個屬性是獲取已知節點（parentObj）的最後一個子節點。與firstChild一樣，它也可以遞歸運用。在運用中，如果我們把二者結合起來，那麼將會達到更加令人興奮的效果，即：parentObj.firstChild.lastChild.lastChild。
◆parentObj.childNodes ：獲取已知節點的子節點數組，然後可以通過循環或者索引找到須要的節點。留心：經測試發覺，在IE7上獲取的是直接子節點的數組，而在Firefox2.0.0.11上獲取的是所有子節點即包括子節點的子節點。
◆parentObj.children ：獲取已知節點的直接子節點數組。留心：經測試，在IE7上，和childNodes效果一樣，而Firefox2.0.0.11不支持。這也是爲什麼我要運用和其他要領不同樣式的原由，因此不建議運用。
◆parentObj.getElementsByTagName(tagName) ：運用要領不再贅述，它返回已知節點的所有子節點中類型爲指定值的子節點數組。例如：parentObj.getElementsByTagName('A')返回已知的子節點中的所有超鏈接。
3、通過臨近節點獲取
◆neighbourNode.previousSibling ：獲取已知節點（neighbourNode）的前一個節點，這個屬性和前面的firstChild、lastChild一樣都似乎可以遞歸運用的。
◆neighbourNode.nextSibling ：獲取已知節點（neighbourNode）的下一個節點，同樣支持遞歸。
4、通過子節點獲取
◆childNode.parentNode ：獲取已知節點的父節點。
上面提到的要領 ，只是一些基本的要領 ，如果運用 了Prototype等JavaScript庫，可能還獲得其他不同的要領，例如通過節點的class獲取等等。不過，如果能夠靈活運用上面的各種要領 ，相信應該可以應付大部分的程序。
 */

	</script>	
		
	</body>
</html>

節點的操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>創建刪除元素</title>
		
		<style>
			#11{
				width: 200px;
				height: 200px;
				background-color: green;
			}
			
			
			
			
		</style>
		
	</head>
	<body>
		
		<a href="https://www.thinkcss.com/wenti/1440.shtml">居中</a><br />
		<a href="https://www.cnblogs.com/jiekk/p/5802147.html">div居中的幾種方法</a><br />
		<div id="11"></div><br />
		<div id="22">22222</div><br />
		<div id="33">333333</div><br />
		<div id="44">44444444</div><br />
		<div id="55">5555555</div><br />
			<div id="66">66666</div><br />
		<img id="img1"  style="width: 200px; height: 200px;"  src="../img/map.png" />
			<img id="img2"  style="width: 200px; height: 200px;"  src="../img/fly.jpeg" />
		<button id="rem">移除圖片</button>
	
		<script>
			document.write('<div >666</div>')
			document.write(' <img src="../img/888.gif" />')
			document.write('<p></p>');
			var btn = document.createElement("button");
		   btn.style.backgroundColor = 'red';
			btn.style.width = '100px';
			btn.style.height ='40px' ;
			btn.innerHTML = 'js創建btn';
			
			btn.onclick = function(){
				  btn.style.backgroundColor = 'green';
				  	btn.innerHTML = 'btn點擊成功';
			};
			//將btn 添加到body
	      	document.body.appendChild(btn);
	
	
	var  div1 = document.getElementById('11');
	div1.style.backgroundColor = 'yellow';
	div1.style.width = '200px';
	div1.style.height = '200px';
	div1.style.display = 'table-cell';
	div1.style.verticalAlign = 'middle';
  

	
	var div = document.createElement('div');
	div.style.backgroundColor = 'red';
	div.style.height = '100px';
	div.style.width = '100px';
	div.style.lineHeight = '100px';
	div.style.textAlign = 'center';
	div.style.overflow = 'auto';

	div.style.margin = 'auto';
   
	div.innerHTML = '我是用js添加到div上的div';
	
	div1.appendChild(div);
	
//	2.replaceChild( )   替換某個元素
	var div66 = document.createElement('div');
	div66 .innerHTML = ' 鼠標移出時 替換元素666';
	div66.style.backgroundColor = 'blue';
//	
	//鼠標移開時替換元素
	div.onmouseleave = function(){
		
		div1.replaceChild(div66,div);
	};
	
			
	//修改 拿到要修改的標籤進行修改
	var div2 = document.getElementById('22');
	div2.innerHTML = '修改div內容';
	div2.style.backgroundColor = 'green';
	div2.style.color = 'red';
	div2.style.width = '300px';
		
	
	//刪除
	
	var img = document.getElementById('img1');
	
	var img1 = document.getElementById('img2');
	
var remBtn = document.getElementById('rem');
remBtn.onclick = function(){
	
	if(remBtn.innerHTML == '移除圖片'){
		img.remove();
	//推薦第二種
	img1.parentNode.removeChild(img1);
		remBtn.innerHTML = '添加圖片';
	}else{
	
		document.body.appendChild(img);
		document.body.appendChild(img1);
			remBtn.innerHTML = '移除圖片';
	}

};

var div5 = document.getElementById('66');
div5.style.width =  '200px';
div5.style.height = '200px';
div5.style.backgroundColor = 'cyan';
div5.style.textAlign = 'center';
div5.style.lineHeight = '100px';

   if(div5){
	div5.innerHTML = '66669999';
  }else{
  	var obj = document.createElement("input");
            obj.type = "button";
            obj.value = "按鈕";
            obj.id = "btn2";
            document.getElementById("55").appendChild(obj);

  }

			
	//查找  右鍵 檢查 或者審查元素 點擊console查看
	
	
function find(ob){
	
	for(var i =0;i<ob.length;i++){
		console.log(ob[i]);
	}
}
var div4 = document.getElementsByClassName('44');
find(div4);

console.log(document.body);

console.log('網址網址網址111',document.body.innerHTML);
//獲取body裏的內容
console.log('網址網址網址',document.body.outerHTML);


		</script>
		
	</body>
</html>

JS_02 (獲取節點，節點CURD)

GitHub 搭建測試分發平臺

Github無法顯示圖片問題解決方案

瞭解一下開源協議

JS_02 (獲取節點，節點CURD)

MAC Charles 抓包後關閉後無法上網

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JS_02 (獲取節點 ， 節點CURD)

JS_02 (獲取節點，節點CURD)