HTML DOM 学习总结

最新推荐文章于 2022-06-19 18:19:05 发布

哔哩哔哩 - ( ゜- ゜)つロ乾杯

最新推荐文章于 2022-06-19 18:19:05 发布

阅读量117

点赞数 2

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/drankness/article/details/117706958

版权

笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

什么是DOM

将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为3个不同的部分:

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

核心DOM

该笔记主要介绍HTML DOM,所以下面的核心DOM模型主要是以HTMLDOM来做的记录,如果要学习XML DOM 对象, 核心DOM 就不是下面的这些知识了
帮助文档

,HTML DOM模型对象(document).它是通过窗口对象(window)来获取的,

Document : 文档对象:

		1.获取Element对象:
				1.getElementById():根据ID属性值获取元素对象,ID属性值一般唯一
				2.getElementsByTagName() 方法返回拥有指定元素名称的所有元素的 NodeList。
				3.getElementsByTagNameNS() 方法返回带有指定名称和命名空间的所有元素的 NodeList
				4.getElementsByName()    方法放回带有指定标签name的元素对象们,返回NodeList
		2.创建其他DOM对象:
				1.createAttribute(name)
				createComment()
				createElement()
				createTextNode()

Element:元素对象

	获取/创建:   通过Document获取和创建,如上面的介绍
	方法:
			1.removeAttribute():删除属性;
			2.setAttribute():给某个标签增添属性

例如下面这个给a标签增添属性的用例;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <a>点位</a>
      <input type="button" id="btn_set" value="设置属性">

      <script>
        //获取按钮对象
        var  btn = document.getElementById("btn_set")
        //给对象绑定事件
        btn.onclick=function (){
          var element_a = document.getElementsByTagName("a")[0];
          element_a.setAttribute("href","http://www.baidu.com");
        }
      </script>
</body>
</html>

Node:节点对象

	特点:所有的DOM对象都可以认为是一个节点	
	方法:
				appendChild():向节点的:子节点列表的结尾添加一个新的子节点
				removeChild():删除并返回当前节点的指定子节点
				replaceChild():用新节点替换一个子节点.
	注意:如果添加的节点是一个字符串,则会添加失败,应该先把字符串转为文本节点
	(createTextNode("字符串")),然后把该文本节点添加进去
	
	属性:
			parentNode   获取这个对象的父类对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ID="div1"> div1
      <div ID="div2"> div2</div>
    </div>
  
    <a href="javascript:void(0);" id="a_id">删除div2</a>
    
    <input type="button" id="btn" value="删除div2">

    <script>
      var a_id = document.getElementById("a_id");
      a_id.onclick=function (){
        var div_1 = document.getElementById("div1");
        var div_2 = document.getElementById("div2");
        div_1.removeChild(div_2);
      }
      /*
      * 超链接功能:
      * 1.可以被点击:有样式
      * 2.点击后跳转到href指定的URL
      * 需求:保留1功能,却道2功能
      * 实现:href="javascript:void(0);
      * 按钮可以直接实现
      * */
    </script>
    
</body>
</html>

HTML DOM

追加一行:
DOM对象.innerHTML + =“这里写HTML的字符串格式代码”
修改样式:
DOM对象.stype.样式名=“样式内容”

事件监听事件:

概念:就是某些组件被执行了某些操作,就会触发相应的代码

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

常见的事件:

	1.单击事件:
	 		onclick  :  单击事件
	 		ondbclick  :  双击事件
	 2.焦点事件:
	 		onblur:   失去焦点
	 		onfocus  :   获取焦点
	 3.加载事件:
	 		onload  :   一张页面或一幅画像完成加载
	 4.鼠标事件:
	 		onmousedown:   鼠标按钮被按下
	 				定义方法的时候,定义一个形参:event
	 				event对象的button属性可以获取鼠标按钮键的值,就可以进行判断是哪个按键按下了
	 		onmouseup    ;    鼠标按键被松开
	 		等等具体看帮助文档
	 5.键盘事件
	 		onkeydown   :   键盘的某个按键被按下了
	 				定义方法的时候,定义一个形参:event
	 				event对象的keyCode属性可以获取键盘按钮键的值,就可以进行判断是哪个按键按下了
	 		onkeyup   :        键盘的某个按键松开了
	 		onkeypress :       键盘的某个按键按下并松开了
	 		等等具体看帮助文档
	 6.选择和改变
	 		onchange:    域的内容被改变
	 		onselect :      文本被选中
	 7.表单事件:
	 		onsubmit    :   确认按钮被点击的时候
	 				该方法可以阻止表单信息的提交(完成某些信息的校验),在这个绑定事件中如果返回false
	 				就会阻止表单的提交
	 		onreset:          重置按钮被点击.

对于表单的提交监测有下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      //这个窗口加载完毕之后,才会有方法内部的监听
      window.onload=function (){
        // //第一种方法
        // //这种方式会直接收到该方法的返回值
        // document.getElementById("f_form").οnsubmit=function (){
        //   return true;
        // }

        //第二种方式,自定义方法,因为onclick方法调用下面这个方法时,没有返回值
        //他知识调用绑定的方法,所有我们可以return被调用的方法,这样就可以返回布尔值了
        function  checkForm(){
          return true;
        }
      }

    </script>
</head>
<body>
  <form method="get" id="f_form">
    <input type="text" name="name">
    <input type="submit" id="f_submit" onclick="return checkForm()">
  </form>
</body>
</html>