DOM学习笔记

DOM

1.概念:文档对象模型。将标记语言文档的各个组成部分,封装为对象,对标记语言文档进行CRUD(增删改查)的动态操作在这里插入图片描述2.W3C DOM 标准被分为3个不同的部分

1.核心DOM  针对任何结构化文档的标准模型
	Document 文档对象
	Element 元素对象
	Attribute 属性对象
	Text 文本对象
	Comment 注释对象
	
	Node 节点对象 其他5个的父对象
2.XML DOM  针对XML文档的标准模型
3.	HTML DOM  针对HTML 文档的标准模型

核心DOM

Document 文档对象

1.创建(获取):
	window.document/document
2.方法
	a.获取Element对象
		getElementById() 根据id属性值获取元素对象,id属性值一般唯一
		gwtElementsByTagName() 根据元素名称获取元素对象们,返回值是一个数组
		getElementsByClassName() 根据Class属性值获取元素对象们,返回值是一个数组
		getELementsByName() 根据Name属性值获取元素对象们,返回值是一个数组
	b.创建其他DOM对象
		createAttribute(name)
		createComment()
		createElement()
		createTextNode()
3.属性

Element 元素对象

1.创建
	document.Element
2.方法
	removeAttribute() 删除属性 
	setAttribute() 设置属性

Node 节点对象 其他5个的父对象

1.特点:所有DOM对象都可被认为是一个节点
2.方法
	CRUD dom树
		appendChild() 向节点的子节点列表的结尾添加新的子节点
		removeChild() 删除(并返回)当前节点的指定子节点
		replaceChild() 用新节点替换一个子节点
3.属性
	parentNode 返回节点的父节点 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息填入删除系统</title>
</head>
<body>
<input type="text" placeholder="请输入学号" id="id">
<input type="text" placeholder="请输入名称" id="name">
<input type="text" placeholder="请输入性别" id="gender">
<input type="button" value="提交" id="submit">
  <table border="1">
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>性别</td>
    </tr>

    <tr>
      <td>1</td>
      <td>张三</td>
      <td></td>
      <td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
    </tr>

    <tr>
      <td>2</td>
      <td>李四</td>
      <td></td>
      <td><a href="javascript:void(0);"  onclick="Del(this)">删除</a></td>
    </tr>
  </table>

<script>
  var submit = document.getElementById("submit");
  submit.onclick=function (){
    var id=document.getElementById("id").value;
    var name=document.getElementById("name").value;
    var gender=document.getElementById("gender").value;

    var a=document.createElement("a");
    a.setAttribute("href","javascript:void(0);")
    a.setAttribute("onclick","Del(this)")
    var text_a=document.createTextNode("删除");
    a.appendChild(text_a);
    var td_a=document.createElement("td");
    td_a.appendChild(a);


    var td_id=document.createElement("td");
    var text_id=document.createTextNode(id);
    var td_name=document.createElement("td");
    var text_name=document.createTextNode(name);
    var td_gender=document.createElement("td");
    var text_gender=document.createTextNode(gender);
    td_id.appendChild(text_id)
    td_name.appendChild(text_name);
    td_gender.appendChild(text_gender);

    var tr=document.createElement("tr");
    tr.appendChild(td_id);
    tr.appendChild(td_name);
    tr.appendChild(td_gender);
    tr.appendChild(td_a);

    var table = document.getElementsByTagName("table")[0];
    table.appendChild(tr);
  }

  function Del(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr=obj.parentNode.parentNode;
    table.removeChild(tr);
  }
</script>


</body>
</html>

HTML DOM

1.标签题的设置和获取:innerHTML
2.使用html元素对象的属性
3.控制元素样式
	1. 使用元素的style属性来设置
		如:div1.style.border="1px solid blue";
		    div1.style.width="200px";
			div1.style.fontSize="20px";
	2.提前定义好类选择器的样式,通过元素的ClassName属性来设置器class属性值
	如:<style>
		  .d2{
	    border: 1px solid black;
 		 width: 200px;
	    font-size: 10px;
				  }
		  </style>
	  div2.onclick=function(){
	    div2.className="d2";
		  }

这是一个信息填入与删除的案例案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息填入删除系统</title>
</head>
<body>
<input type="text" placeholder="请输入学号" id="id">
<input type="text" placeholder="请输入名称" id="name">
<input type="text" placeholder="请输入性别" id="gender">
<input type="button" value="提交" id="submit">
  <table border="1">
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>性别</td>
    </tr>

    <tr>
      <td>1</td>
      <td>张三</td>
      <td></td>
      <td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
    </tr>

    <tr>
      <td>2</td>
      <td>李四</td>
      <td></td>
      <td><a href="javascript:void(0);"  onclick="Del(this)">删除</a></td>
    </tr>
  </table>

<script>
var submit = document.getElementById("submit");
  submit.onclick=function (){
    var id=document.getElementById("id").value;
    var name=document.getElementById("name").value;
    var gender=document.getElementById("gender").value;

    var table=document.getElementsByTagName("table")[0];
    table.innerHTML+="<tr>\n" +
            "      <td>"+id+"</td>\n" +
            "      <td>"+name+"</td>\n" +
            "      <td>"+gender+"</td>\n" +
            "      <td><a href=\"javascript:void(0);\"  οnclick=\"Del(this)\">删除</a></td>\n" +
            "    </tr>";
  }//使用innerHTML的方法
  function Del(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr=obj.parentNode.parentNode;
    table.removeChild(tr);
  }
</script>


</body>
</html>

事件监听机制

1.概念:某些组件被执行了某些操作后,触发某些代码的执行

事件:某些操作,如单机、双击、键盘按下了、鼠标移动了
事件源:组件。如:按钮、文本输入框...
监听器:代码
注册监听:将事件、事件源、监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码

2.常见的事件(Event)

1.点击事件
	onclick 单击事件
	ondblclick 双击事件
2.焦点事件
	onblur 失去焦点(一般用于表单验证)
	onfocus 元素获得焦点
3.加载事件
	onload 一张页面或一幅图像完成加载
	*window.onload=function(){}
4.鼠标事件
	onmousedown 鼠标按钮被按下
	*定义方法时,定义一个形参,接受event对象 event.button
	onmouseup 鼠标按键被松开
	onmousemove 鼠标被移动
	onmouseover 鼠标移到某元素之上
	onmouseout 鼠标从某元素移开
5.键盘事件
	onkeydown 某个键盘按键被按下
	*event.keyCode
	onkeyup 某个键盘按键被松开
	onkeypress 某个键盘按键被按下并松开
6.选中和改变
	onchange 域的内容被改变
	onselect 文本被选中
7.表单事件
	onsubmit 确认按钮被点击
	*可以阻止表单的提交,用return flag;
	onreset 重置按钮被点击

两种不同的onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>submit</title>
</head>
<body>
<form action="#" id="form" onsubmit="return check()"><!--一定要有return-->
  <input name="username" id="text" >
  <input type="submit" id="submit" value="提交">
</form>
<script>
  // var form=document.getElementById("form");
  // form.οnsubmit=function(){
  //   var flag=true;
  //   return flag;
  // }
  function check(){
    var flag=false;
    return flag;
  }
</script>
</body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值