DOM学习笔记

最新推荐文章于 2022-10-24 18:41:47 发布
最新推荐文章于 2022-10-24 18:41:47 发布
阅读量82 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kanbujianwolue/article/details/118333494
版权

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>
Div.143
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
虚拟浏览器 JSDOM 学习笔记
软件哲学
09-24 3388
这篇文章只是个人学习笔记，所以结构不清，信息不全，建议阅读原版项目手册。   JSDOM 是用nodejs实现的用于测试的虚拟浏览器。 基本例子 const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html",...
JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
JavaScript DOM 学习笔记
幸愉编程·信奥编程私教1v1
02-21 873
DOM学习笔记
HTML DOM学习笔记
Saurfang
07-27 409
  DOM 是Document Object Model( 文档对象模型 )的缩写。  DOM是把html里面的各种数据当作对象进行操作的一种思路。 (面向对象的角度看html的标签) 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点    获取节点 document.getElementById ...
JS+DOM编程学习笔记
qq_42192672的博客
01-18 245
总算是把这本书过了一遍，最后还仿照树上做了个小的web前端网站，分享一下收货 链接：https://github.com/woaixiaoyuyu/Web-front-end/tree/master/JavaScript-DOM-_/JS_DOM_JSD...
JavaScript HTML DOM学习笔记
xuepan1994的博客
07-26 764
JavaScript HTML DOM学习笔记以及动态添加table表格的内容方法
JavaScript 之 DOM 学习笔记
qq_52271364的博客
10-24 441
JavaScript中DOM介绍
DOM学习笔记（二）
zhenyu5665的博客
05-03 8296
盒子模型 盒子模型属性 在JS中通过相关属性可以获取（设置）元素的样式 信息，这些属性就是盒子模型属性（基本上都是有关样式的） client clientTop/ clientLeft： 获取当前元素上 / 左边框的宽度 clientWidth/ clientHeight： 获取当前元素可视区域的宽高（包括padding），和内容溢出无关，就是我们自己设置的宽高+padding 获取当前页面...
JavaScript HTML DOM 学习笔记
weixin_51302779的博客
12-12 480
JavaScript HTMLDOM学习笔记，随手一记
DOM学习笔记（部分）
weixin_44171647的博客
04-04 791
基础名词 文档：一个网页可以称为文档 节点:网页中的所有内容都是节点（标签，属性，文本，注释等） 元素：网页中的标签 属性：标签的属性 api分类 对元素对象的增删改查 对元素属性的增删改查 对元素位置的获取 键盘事件与鼠标事件 事件监听 事件方法 事件对象 [点击，滚动，移入，输入，键入] node（节点）基础分类 Node.ELEMENT_NODE:1 //标签 * Node.ATTRIBUTE_NODE:2 //属性 * Node.TEXT_N..
JavaScript高级程序设计 DOM学习笔记
10-28
DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
js DOM学习笔记11
08-08
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
比较详细的javascript DOM 学习笔记第1/2页
10-30
看了很多的js dom学习资料，发现这个比较详细，特转载给大家学习一下
JS基本功DOM学习笔记
07-12
在JS基本功DOM学习笔记中，我们将深入探讨以下几个核心知识点： 1. **DOM树**：DOM将网页内容表示为一棵由节点构成的树形结构，其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`，其他节点如`<div>...
dom编程学习笔记.pdf
最新发布
11-15
dom编程学习笔记.pdf
js DOM的学习笔记
10-28
DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发
杨中科 传智播客 DOM 学习笔记
08-26
根据给定的文件信息，我们可以总结出一系列与DOM（Document Object Model）操作、JavaScript事件处理以及浏览器窗口操作相关的IT知识点。以下是对这些知识点的详细解释： ### 1. DOM Event Handling（DOM事件处理）...
比较详细的javascript DOM 学习笔记第1 2页.docx
01-22
比较详细的javascript DOM 学习笔记第1 2页.docx
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值