HTML DOM笔记整理

节点的属性:

关键字	简介	示例代码
nodeName	节点名称	示例代码
nodeValue	节点值	示例代码
nodeType	节点类型	示例代码
innerHTML	元素的文本内容	示例代码
id value className	元素上的属性

节点名称:

节点值:

<html>
   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>

元素的文本内容:

修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。效果是一样的。

<html>
    
<div id="d1">hello HTML DOM</div>
<script>
 
function changeDiv1(){
  document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
  document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
 
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
 
</html>

DOM样式:

var d = document.gertelementById("d");

d.style.display = ""none";

<button onclick="hide()">隐藏div</button>
  
<button onclick="show()">显示div</button>
  
<br>
<br>
  
<div id="d">
  
这是一个div
  
</div>
  
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
  
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
  
</script>

案例练习:

HTML DOM笔记整理

<div id="d0">
		<span>id</span>
		<span>名称</span>
		<span>血量</span>
		<span>伤害</span>
	</div>
	<div id="d1">
            <span>1</span>
            <span>gareen</span>
            <span>340</span>
            <span>58</span>
        </div>
        <div id="d2">
            <span>2</span>
            <span>teemo</span>
            <span>320</span>
            <span>76</span>
        </div>
        <div id="d3">
            <span>3</span>
            <span>annie</span>
            <span>380</span>
            <span>38</span>
        </div>
        <div id="d4">
            <span>4</span>
            <span>deadbrother</span>
            <span>400</span>
            <span>90</span>
        </div>
var span1 = document.getElementsByTagName("span");
		 for(i = 0; i < span1.length; i++){
                span1[i].style.display = "inline-block";
                span1[i].style.width = "200px";
                span1[i].style.textAlign = "center";
                span1[i].style.lineHeight = "30px";
            }
		 var span2 = document.getElementsByTagName("div");
		 for(var j=0; j<span2.length; j++){
		 		span2[j].style.borderBottom = "solid 1px #ccc";
		 		span2[j].style.display = "inline-block";
		 		if(!(j%2)){
		 			 span2[j].style.backgroundColor = "#f5f5f5";
		 		}
		 }

另外注意到一点的是 div内容标签要放在<script>标签前面显示不然内容没加载出来就对其进行操作当然是无从下手的.

DOM事件:

关键字	简介	示例代码
onfocus onblur	焦点事件	示例代码
onmousedown onmouseup onmousemove onmouseout	鼠标事件	示例代码
onkeydown onkeypress onkeyup	键盘事件	示例代码
onclick ondbclick	点击事件	示例代码
onchange	变化事件	示例代码
onsubmit	提交事件	示例代码
onload	加载事件	示例代码
this	当前组件	示例代码
return false	阻止事件的发生

节点关系:

HTML DOM笔记整理

关键字	简介	示例代码
	节点关系图	示例代码
parentNode	父节点关系	示例代码
previousSibling nextSibling	同胞节点关系	示例代码
childNodes	子节点关系	示例代码
childNodes children	childNodes和children的区别

创建节点:

关键字	简介	示例代码
createElement	创建元素节点	示例代码
createTextNode	创建文本节点	示例代码
createAttribute	创建属性节点

删除节点:

removeChild	删除元素节点	示例代码
removeAttribute	删除属性节点	示例代码
removeChild	删除文本节点

替换节点:

关键字	简介	示例代码
replaceChild	替换节点	示例代码

插入节点:

关键字	简介	示例代码
appendChild	追加节点	示例代码
insertBefore	在前方插入节点	示例代码