HTML DOM笔记整理

最新推荐文章于 2022-08-26 19:13:18 发布

说好今夜不点烟

最新推荐文章于 2022-08-26 19:13:18 发布

阅读量200

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/dianyanxia/article/details/87098124

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

节点的属性:

关键字	简介	示例代码
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>

案例练习:

<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	阻止事件的发生

节点关系:

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