HTML DOM 学习

By: Mirror王宇阳

E-mail:2821319009@qq.com

博客主页：https://www.cnblogs.com/wangyuyang1016/

DOM 文档对象模型

DOM简单来说就是文档对象模型，当一个HTML页面被加载就会创建HTML页面的DOM

JavaScript的“权利”：

  • 改变页面中DOM的所用的HTML元素
  • 改变页面中DOM的所用的HTML属性
  • 改变页面中DOM的所用的CSS样式
  • 添加/删除DOM中所用的HTML元素、属性和CSS样式属性
  • 对页面中所有已存在的HTML事件作出反应
  • 可以在DOM中创建新的HTML事件

DOM的特性：

  • 整个HTML页面文档就是一个文档节点（只存在一个 <html>根元素）
  • 每一个HTML内的标签是一个元素节点
  • 每一个HTML元素中的文本是文本节点
  • 每一个HTML属性中的内容是属性节点
  • 注释内容属于注释节点

DOM的节点：

  • doucument 文档节点；HTML文档的父节点，DOM文档的根节点
  • element 元素节点；元素节点拥有自己的属性节点
  • attr 属性节点；以element作为父节点
  • text 文本节点；可作为独立节点存在，是终节点
  • conmment 注释节点；解释HTML的注释类信息

document 对象

获取元素对象的方法:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<h3>I love HCIT</h3>

		<div id="info" class="bd">

			<h2>Hello,World!</h2>

			<h3>I'am Mirror王宇阳 is student</h3>

		</div>

		<script>

			var id = document.getElementById("info");

			var tag= document.getElementsByTagName("h3");// 全局

			var idtag = id.getElementsByTagName("h3"); // div_info标签中的h3

			var classt = document.getElementsByClassName("bd");

			console.log(id);

			console.log(tag[0]);

			console.log(idtag[0].innerHTML);

			console.log(classt);

			console.log(classt[0].innerHTML);

		</script>

	</body>

</html>
document.getElementsById()
  • 返回指定标签ID名的元素
document.getElementsByName()
  • 返回指定标签Name名的元素
document.getElementsByTagName()
  • 返回指定标签类型名的元素
document.getElementsByClassNam()
  • 返回指定标签Class名的元素

上述四种常见的获取元素对象标签的方法，都不具有绝对的唯一性

当我们获取元素对象标签元素的时候，方法返回的是自己查找的所有内容以数组返回

我们需要使用数组下标的方式获取读取唯一的元素

另外，我们可以利用节点的关系来对元素标签获取进行规范和控制，例如：

我们获取的内容在div中的table中的th标签中的元素，那么我们使用

getElementsByTagName()方法获取所有th标签，那么HTML页面中无数的th标签都会被获取

我们可以使用getElenemtsById()先定位目标div标签，再通过getElementsByTagName()方法获取th标签元素

对象元素读写特性:

innerHTML
  • 表示对象元素所包含的文本和HTML代码内容
innerText
  • 表示起始标签和结束标签之间的纯文本内容
outerHTML
  • 整个DOM节点的HTML和文本内容，包含标签自身
outerText
  • 表示起始标签和结束标签之间的纯文本内容

DOM对象节点操作:

创建节点
createElement():创建元素节点

返回新节点的对象引用，参数是创建的元素节点的标签名

var newElement = document.createElement("a"); // 创建一个<a>标签元素节点
createTextNode():创建文本节点

返回新节点的对象引用，参数是string并添加为节点的文本

var newText = document.createTextNode("百度一下");//创建一个baidu文本节点
createAttribute():创建属性节点

返回新节点的对象引用，参数是新节点的属性名。

属性节点必须要求以element元素节点为父类节点

var newAttr = document.createAttribute("href"); //创建一个color属性节点

newAttr.value = "http://www.baidu.com";
添加节点
appendChild()

添加新节点到方法所属节点的尾部，参数为新添加的子节点对象；

适合元素节点、文本节点的添加

newElement.appendChild(newText);// newElement节点添加文本节点newText

document.body.appendChild(newElement);// body标签中添加newElement节点
setAttributeNode()

添加新属性节点到方法所属节点的属性集合中，参数为新添加的子节点对象；

newElement.setAttributeNode(newAttr);//newElement添加newAttr属性节点
insertBefore()
insertBefore(node1,node2);

将node1新节点插入到相对节点node2的前面作为方法所属节点的子节点

删除节点
removeChild()

删除节点，参数是需要删除的节点node；该方法的所属节点对象是node的父节点

element.removeChild(node);
替换节点
replaceChild()
element.replaceChild(node1,node2);

node1节点替换原节点node2；该方法的所属节点对象是node的父节点

复制节点
cloneNode()

赋值一个节点，返回复制后的节点引用；参数为布尔值，true/false表示是否克隆该节点所哟子节点。

element.cloneNode(bool);

返回值是一个克隆的节点

var node = newElement.cloneNode(true); //复制一个节点

导航节点

firstChild : 返回第一个子节点对象内容

console.log(d1.firstChild.innerHTML);

lastChild : 返回最后的子节点对象内容

console.log(d1.lastChild.innerHTML);

parentNode : 返回子节点的父节点对象

console.log(d1.parentNode);

childNodes : 返回指定子节点对象的全部集合

console.log(d1.childNodes)

console.log(d1.childNodes.length)

children : 返回对象元素子节点的对象集合

console.log(d1.children)

console.log(d1.children.length);

nodeType : 返回节点类型 （3-文本节点 1-元素节点）

for (var i = 0 ; i < demo.childNodes.length ; i++) {

	if (demo.childNodes[i].nodeType == 3) {

		textNode ++;

	} else if(demo.childNodes[i].nodeType == 1){

		elementNode ++;　

	}

}

DOM事件

事件触发条件
事件属性 事件说明 触发
onblur 失去焦点时 键盘、鼠标、blur方法
onfocus 获得焦点时 键盘、鼠标、focus方法
onchange 修改内容时 键盘、鼠标、赋值语句
onclick 鼠标单击时 键盘、鼠标、click方法
ondblclick 鼠标双击时 鼠标
onkeydown 键盘按下 键盘
onkeypress 键盘按键（按/松） 键盘
onkeyup 键盘抬起 键盘
onmousedown 鼠标按下时 鼠标
onmousemove 鼠标移动时 鼠标
onmouseup 鼠标抬起时 鼠标
onmouseout 鼠标移出时 鼠标
onmouseover 鼠标移入时 鼠标
onload 载入时 系统
onsubmit 表单提交时 键盘、鼠标、submit方法
onreset 表单重置时 键盘、鼠标、reset方法
event对象属性

当事件发生时会产生事件对象，事件对象得作用时用来记录事件发生得关键信息

属性 说明 条件
altKey、ctrlKey、shiftKey 是否按下Alt、Ctrl、Shift键 键盘鼠标
button 鼠标按钮是否按下 鼠标
keyCode 键盘按键时unicode值 键盘
clientX、clientY 鼠标在窗口区得坐标 鼠标
offsetX、offsetY 鼠标相对事件触发的坐标 鼠标
srcElement 事件触发者 事件

HTML DOM 学习的更多相关文章

  1. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  2. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  3. Js dom 学习

    节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...

  4. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

  5. JavaScript DOM学习总结（二）

    获取和设置属性 DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用. 接下来就一起使用DOM来干些实事吧! 1.getAttribute getAtt ...

  6. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  7. HTML DOM学习之三

    1.创建新的HTML元素:appendChild(); 如需向HTML DOM添加元素,首先必须创建该元素,然后把它追加到已有的元素上: <div id="div1"> ...

  8. HTML DOM学习之二

    1.HTML DOM属性: **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用 <html> & ...

  9. HTML DOM学习之一

    1.HTML DOM定义了访问和操作HTML文档的标准方法:DOM以树型结构表达了HTML文档: 2.DOM是W3C的标准,定义了访问HTML和XML文档的标准: DOM(文档对象模型)是中立于平台和 ...

随机推荐

  1. ubuntu 交叉编译 busybox 1.31.1

    目的:静态编译 Busybox_arm64 1.13.1 环境:Ubuntu 18.04.3 #----------------环境配置 # aarch64-linux-gnu-g++ sudo ap ...

  2. 2 JAVA语言的基本规则

    1. 类名 类名需使用字母开头,使用驼峰命名法,如HelloWorld,对应的文件为 HelloWorld.java,与类名保持一致.编译好的字节码文件为 HelloWord.class. 2. 区分 ...

  3. 请停止编写这么多的for循环！

    在这篇文章中,我想和你一起回到基础知识,并讨论 Java 中的 for 循环.老实说,我正在为自己写这篇博客文章,因为我也会这样做.从 Java 8 开始,我们不必在 Java 中编写太多 for 循 ...

  4. 抖音抖一抖-SVG和CSS视觉故障艺术小赏

    故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...

  5. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（3）- Serial ISP模式(blhost)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...

  6. python脚本-简单读取有效python代码量

    import os count=[0,0] paths=[] file_count=[0] def sum_code(path): if os.path.isfile(path): one_file( ...

  7. css实现等边六边形

    在平时的页面布局中,我们也会经常碰到蜂窝煤类型的模块: 那么我们把他拆开,就是单个的六边形,如何用css去实现一个六边形呢?下面是我用绘图软件绘制的css实现六边形的步骤: 具体的html代码如下: ...

  8. mysql那些事(3)小数如何存储

    创建mysql数据表的时候,经常会遇到存储小数(浮点数)的情况,如:价格,重量,身高等. 目前大的公司流行三种存储方案: 1.将数据扩大10的倍数达到使用整数类型存储目的. 比如价格,我们经常以分为单 ...

  9. js递归优化

    递归优化 递归在我们平时撸码中会经常用到,不过可能很多人不知道递归的弊端,就是会导致调用栈越来越深.如果没有节制的使用递归可能会导致调用栈溢出. 那什么是递归呢? 递归调用是一种特殊的嵌套调用,是某个 ...

  10. 全栈项目|小书架|微信小程序-实现搜索功能

    效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...