JavaScript的学习（三）——DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。JavaScript能改变页面中所有HTML元素，能改变所有HTML属性，能改变所有CSS属性，能对页面中的所有事件作出反应。

通过JavaScript操作HTML元素的时候，需要找到该元素，有以下方式来找到该元素：

①通过id找到HTML元素：document.getElementById("id")

②通过标签名找到HTML元素：document.getElementByTagName("标签名")

③通过类名找到HTML元素:document.getElementByClassName("类名")

④通过name属性找到HTML元素:document.getElementByName("name")

下面通过代码来实现学习一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选全不选输入选</title>
		<script type="text/javascript" src="../../js/全选全不选反选输入选/check.js" ></script>
	</head>
	<body>
		<form>
			请选择你的爱好：<br />
			<input type="checkbox" name="hobby"/>1.音乐
			<input type="checkbox" name="hobby"/>2.登山
			<input type="checkbox" name="hobby"/>3.跑步<br />
			<input type="button" value="全选" onclick="checkall()" />
			<input type="button" value="全不选" onclick="clearall()" />
			<input type="button" value="反选" onclick="checkinverse()" />
			<p>请输入您要选择爱好的序号，序号为1-6:</p>
          	<input id="wb" name="wb" type="text" >
          	<input name="ok" type="button" value="确定" onclick = "checkone()">
		</form>
	</body>
</html>

//实现全选
function checkall(){
    var hobby = document.getElementsByName("hobby");
    for(var i=0;i<hobby.length;i++){
        hobby[i].checked=true;
    }
           
}
//实现全不选
function clearall(){
    var hobby = document.getElementsByName("hobby");
    for(var i=0;i<hobby.length;i++){
    	hobby[i].checked = false;
    }
            
}
//实现输入数字选择
function checkone(){
	var j=document.getElementById("wb").value;
    if(parseInt(j) > 3  || parseInt(j) < 1){
        alert("输入错误，请输入1-3之间的数字！！！");
    }else{
        var hobby=document.getElementsByName("hobby");
        hobby[parseInt(j)-1].checked=true;
    }
        
}
//实现反选
function checkinverse(){
	var hobby = document.getElementsByName("hobby");
	for(var i = 0;i < hobby.length;i++){
		hobby[i].checked = !hobby[i].checked;
	}
}

改变HTML输入流

document.write(),可用于直接向输出流写内容。

改变HTML内容

document.getElementById(id).innerHTML="abcd";

innerHTML:添加元素到指定节点，可以添加文本及html标签：属于覆盖式写入

innerText：添加文本内容，html标签不会格式化

改变HTML属性

document.getElementById(id).attribute=新属性值

attribute指属性

改变CSS样式

document.getElementById(id).style.property=新样式

下面通过代码来展示一下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>

<link rel="stylesheet" href="../../css/通过JS改变网页设置/JSchangeCSS.css" />
<script type="text/javascript" src="../../js/通过JS改变网页设置/JSchangeCSS.js" ></script>
<scr
</head>
<body>
  <div id="idtest"> 
     <p>JavaScript的DOM模型</p>
     <p>JavaScript的DOM模型</p>
     <p>JavaScript的DOM模型</p>
     <p>JavaScript的DOM模型</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onClick="changeColor()">  
    <input type="button" value="改变宽高" onClick="changeWidth()">
    <input type="button" value="隐藏内容" onClick
        ="changeNone()">
    <input type="button" value="显示内容" onClick="changeBlock()">
    <input type="button" value="取消设置" onClick="cancel()">
  </form>
 
</body>
</html>

body{font-size:12px;}
#idtest{
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;
}

//定义"改变颜色"的函数
function changeColor(){
	var color = document.getElementById("idtest");
    color.style.color = "red";
    color.style.backgroundColor = "green";
}

//定义"改变宽高"的函数
function changeWidth(){
	var hw = document.getElementById("idtest")
    hw.style.width = "1500px";
    hw.style.height = "1500px";
}

//定义"隐藏内容"的函数
function changeNone(){
	var None = document.getElementById("idtest");
    None.style.display="none";
}

//定义"显示内容"的函数
function changeBlock(){
	var Block = document.getElementById("idtest");
    Block.style.display="block";
}

//定义"取消设置"的函数
function cancel(){
    var message=confirm("你确定要重置所有设置么？");
    if(message==true)
        idtest.removeAttribute("style");
}

DOM中的事件跟JavaScript中的事件一样，具体使用时可再去查看

元素操作

创建新元素：如果需要在HTML中添加新的元素，必须先创建改元素的节点，然后向一个已经创在的元素追加该元素。

步骤：

①获取父节点

②createElement(标签名)，创建标签

③父节点.appendChild(创建的子节点)，追加

下面通过代码来学习一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/创建新元素/createElement.js" ></script>
	</head>
	<body>
		<div id="div1">
			<p>第一个段落</p>
			<p>第二个段落</p>
			
		</div>
		请输入需要创建的节点:<input type="text" id="e" />
		请输入需要创建的元素:<input type="text" id="t" />
		<input type="button" value="创建" onclick="create()" />
	</body>
</html>

function create(){
	//获取父节点
	var para = document.getElementById("div1");
	//获取要创建的节点名
	var e1 = document.getElementById("e").value;
	console.log(e1);
	//获取要创建的元素
	var t1 = document.getElementById("t").value;
	//创建节点
	var ele = document.createElement(e1);
	//添加元素
	var node = document.createTextNode(t1);
	//将元素追加入节点
	ele.appendChild(node);
	//将要创建的节点追加到已有的节点
	para.appendChild(ele);
}

删除已有的HTML元素

步骤：

①找到父节点

②找到需要删除的子节点

③父节点.removeChild(子节点)

或者

①找到需要删除的子节点

②子节点.parentNode:通过值节点直接找到父节点

③删除子节点

下面通过代码来学习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/删除已有元素/removeElement.js" ></script>
	</head>
	<body>
		<div id="div1">
			<p id="p1">第一个段落</p>
			<p id="p2">第二个段落</p>
			<p id="p3">第三个段落</p>
		</div>
		请输入要删除的段落（p1~p3）:<input type="text" id="r" />
		<input type="button" value="删除" onclick="removeTest()" />
	</body>
</html>

function removeTest(){
	//获取需要删除的子节点的名称
	var sonName = document.getElementById("r").value;
	//获取需要删除的子节点
	var sonNode = document.getElementById(sonName);
	//获取需要删除的子节点的父节点
	var para = sonNode.parentNode;
	para.removeChild(sonNode);
}

下面我们来做一个练习，需求：创建一个学生表格，可以实现添加学生和删除学生，初始表格只有表头

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/表的添加和删除/addAndRemoveOfTable.js" ></script>
	</head>
	<body>
		<table id="table1" border="1px" width="50%" >
			<tr>
				<th>姓名</th>
				<th>学号</th>
				<th>操作</th>
			</tr>
		</table>
		<input type="button" value="添加一行" onclick="addTest()" />
	</body>
</html>

//获取tr
window.onload = function(){
	var tr = document.getElementsByTagName("tr");
	for(var i = 0;i < tr.length;i++){
		bc(tr[i]);
	}
}
//使鼠标移上和移开tr发生一点背景的变化
function bc(obj){
	obj.onmouseover=function(){
		obj.style.backgroundColor="#f2f2f2";
	}
	obj.onmouseout=function(){
		obj.style.backgroundColor="#fff";
		
	}
}
//添加
function addTest(){
	//获取父节点
	var table = document.getElementById("table1");
	//创建子节点tr
	var tr = document.createElement("tr");
	//创建子节点td1-td3
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	//获取姓名和学号
	var name = prompt("请输入学号");
	var num = prompt("请输入姓名");
	if(name&&num){
		td1.innerHTML = num;
		td2.innerHTML = name;
		td3.innerHTML="<input type='button' value='删除' onclick='deleteTest(this)'>";
		//设置属性，居中
		tr.align="center";
		//把td1-td3追加到tr中
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
	
		//把tr添加到table
		table.appendChild(tr);
		var tr = document.getElementsByTagName("tr");
		for(var i = 0;i < tr.length;i++){
			bc(tr[i]);
		}
	}else if((name === "")||(num === "")){
		alert("学号或姓名不能为空，创建失败");
	}else{
		alert("您已取消添加");
	}
	
	
}
//删除
function deleteTest(obj){
	var r = confirm("是否删除？")
	if(r){
		//获取table节点
		var table = document.getElementById("table1");
		//获取table下的子节点,即需要删除的节点
		var son = obj.parentNode.parentNode;
		//删除
		table.removeChild(son);
	}else{
		alert("您已取消删除！");
	}
	
}

JavaScript的学习（三）——DOM

猜你喜欢