DOM学习-20180905

今日学习一点DOM；
###属性###
一、获取
语法一；document.getElementById(“id名”).getAttribute(“属性名”);
语法二；
document.getElementById(“id名”).style.属性;

二、修改
修改
语法一；document.getElementById(“id名”).setAttribute(“属性名”,“新属性值”);

语法二；document.getElementById(“id名”).setProperty(“属性名”,“新属性值”);

语法三；document.getElementById(“id名”).setAttribute(“style”,“属性名:属性值;属性名:属性值;”);

语法四；document.getElementById(“id名”).style.属性名=“属性值”;

删除
语法；document.getElementById(“id名”).removeAttribute(“属性名”)
###事件###
一、事件名称=“on”+“事件类型”。
二、常用事件

字符	含义
.onload	加载完后，再触发的事件。
onclick	鼠标左击
ondbclick	鼠标双击
onmouseover	鼠标滑过时触发
onmouseout	鼠标离开时触发
onfocus	获得焦点
onblur	失去焦点
onchange	改变

三、创建与引用事件
1、属性引用

//-------------直接单击，替换文本内容--------------
<body>
	<h1 onclick="this.innerHTML='插入的内容!'">直接单击，替换文本内容!</h1>
</body>

//-------------创建函数，调用函数-------------------
<body>
	<h1 onclick="changetext(this)">创建函数，调用函数!</h1>
	//语法；onclick="功能事件名(this)"
	<script>
		function changetext(a){a.innerHTML="插入的内容!";}
		//语法；function 功能事件名(参数){功能内容}
	</script>	
</body>

2、id引用

<!-------------创建函数，调用函数------------------->
<body>
	<!-- 给待操作的节点一个id，id的名称为testOne。-->
	<h1 id="testOne">创建函数，调用函数!</h1>
	<!-- 语法；id="id名" -->
	<script>
		//访问获取id名为testOne的节点，并创建节点getid接收。
		var getid= document.getElementById("testOne");
		//创建功能操作内容
		getid.onclick = function() {getid.innerHTML="插入的内容!";}
		//语法；新节点名.事件名.function(){ 功能内容}
	</script>	
</body>

猜你喜欢