HTMLDOM 学习笔记

最新推荐文章于 2022-05-31 19:25:57 发布

demons_dai

最新推荐文章于 2022-05-31 19:25:57 发布

阅读量138

点赞数

分类专栏： html 文章标签：学习笔记

本文链接：https://blog.csdn.net/demons_dai/article/details/88068544

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

Document Object Model（文档对象模型）的缩写。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

01.核心 DOM - 针对任何结构化文档的标准模型

02.XML DOM - 针对 XML 文档的标准模型：定义所有XML元素的对象和属性以及访问方法。

03.HTML DOM - 针对 HTML 文档的标准模型：是HTML的标准对象模型，标准编辑接口，W3C标准。定义所有HTML元素的对象和属性以及访问方法。

04.DOM节点,HTML文档中所有内容都是节点：文档节点、元素节点、文本节点、属性节点、注释节点。父节点，子节点和同胞：父节点拥有子节点，同级的子节点被称为同胞（亲兄弟姐妹）：

在节点树中，顶端节点被称为根（root）如：<html>
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点
处理中的常见错误是希望元素节点包含文本。

DOM方法：编程接口：所有HTML元素被定义对象，编程接口是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素），属性是能够获取或设置的值（比如节点的名称或内容）。
DOM对象：常用的方法有getElementById(id)获取带有指定id的节点（元素）、appendChild(node)插入新的子节点（元素）、removeChild（node）删除子节点（元素）；常用的属性有innerHTML（节点元素的文本值）、parentNode（节点元素的父节点）、childNode（节点元素的子节点）、attributes（节点元素的属性节点）。
innerHTML属性可用于获取或改变任意HTML元素，包括<html><body>
nodeName属性规定节点的名称：只读的、元素节点的nodeName与标签名相同、属性节点的nodeName与属性名相同、文包节点的nodeName始终是＃text、文档节点的nodeName始终是＃document。始终包含html元素的大写字母标签名
nodeType属性返回节点的类型。是只读的。
nodeValue属性规定节点值：元素节点的nodeValue是undefined或null、文本节点的nodeValue是文本本身、属性节点的nodeValue是属性值。例：document.write(x.firstChild.nodeValue);
某个人是一个对象也就是元素，eat、sleep、work、play等则是方法，name、height、tall、age等则是属性。
DOM访问：访问HTML元素等同于访问节点：

通过getElementById（）方法返回带有指定ID的元素；document.getElementById("intro")；

getElementsByTagName（）方法返回带有指定标签名的所有元素。例：document.getElementsByTagName("p");

getElementsByCLassName（）方法查找带有相同类名的所有HTML元素。例：document.getElementsByClassName("intro");

修改HTML：

改变HTML内容；

改变CSS样式
改变HTML属性
创建新的HTML 元素
删除已有的HTML元素
改变事件（处理程序）
创建HTML内容，例：document.getElementById("p1").innerHTML="New text!"

获取p1元素更改为New text

改变HTML样式，例：document.getElementById("p2").style.color="blue";

获取p2元素将它的样式中的颜色改变为蓝色

document.getElementById("p2").style.fontFamily="Arial";

获取p2元素将它的样式中的字体改变为Arial

创建新的HTML元素，例：首先必须创建该元素（元素节点），然后把它追加到已有的元素上，var para=document.createElement("p"); 创建元素节点

var node=document.createTextNode("This is new."); 创建文本节点

para.appendChild(node); 把新的node字节点添加到指定para节点

var element=document.getElementById("d1"); 获取d1创建新的变量

element.appendChild(para);把para节点添加到element中

修改HTML内容

改变HTML内容＝（6-（一））
改变HTML样式＝（6-（二））
使用事件：当 HTML 元素”有事情发生“时，浏览器就会生成事件：在元素上点击、加载页面、改变输入字段。例：
- 点击按钮时改变<body>元素的背景颜色：<input type="button"οnclick="document.body.style.backgroundColor='lavender';"value="改变背景色">
- 点击按钮时改变<p>元素的文本:<p id="p1">Hello world!</p> <script>function tet (){document.getElementById("p1").innerHTML="New World?";}</script><input type="button" οnclick="tet()" value="改变文本"/>

修改HTML元素

创建新的HTML元素＝（6-（三））：

appendChild（）：将心元素作为父元素的最后一个子元素进行添加

nserBefore（）：（6-（三））＋var child=document.getElementById("p1");获取id＝p1创建新的变量；element.insertBefore(para,child); 获取id＝p1创建新的变量

删除已有的HTML元素，删除 HTML 元素，您必须清楚该元素的父元素：

var parent=document.getElementById("div1"); 获取id＝div1元素为parent

var child=document.getElementById("p1"); 获取id＝p1元素为child

parent.removeChild(child);删除父元素parent中的子元素child

or:找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

替换HTML元素，replaceChild（）：

（8-（二））＋parent.replaceChild(para,child);

HTML事件

HTML 事件的例子：

当用户点击鼠标时，例：<h1 οnclick="this.innerHTML='hello!'">请点击这里!</h1>or <script>function changetext(id){id.innerHTML="hello!"; } </script> <h1 οnclick="changetext(this)">请点击这里!</h1>
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

Html事件属性：向Html元素分配事件，可以使用事件属性。

<button οnclick="displayDate()">试一试</button>当点击按钮时，会执行名为 displayDate 的函数。
使用HTMLDOM来分配事件，例：

displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。

onload 和 onunload 事件，当用户进入或离开页面时，会触发这两个事件。onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload 和 onunload 事件可用于处理 cookies
onchange 事件，用于输入字段的验证。例：<input type="text" id="fname" onchange="myFunction()"><p>离开框时，被触发的函数会把输入的文本转换为大写字母。</p> <script>function myFunction(){x=document.getElementById("fname");

x.value=x.value.toUpperCase();}</script> onchange，当用户改变输入字段的内容时，将调用 upperCase() 函数。

onmouseover 和 onmouseout 事件，可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件，是鼠标点击的全部过程。当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

HTML DOM导航

HTMLDOM节点列表：getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。<p> 节点：x[0].innerHTML; 下标号从 0 开始。
导航节点关系：能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
DOM根节点：有两个特殊的属性，可以访问全部文档：document.documentElement - 全部文档－文档的主体
childNodes 和 nodeValue，除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。需要注意的是，innerHTML不能用在xml数据源里取节点值，至少在IE里会取不到值；应该使用nodeValue

demons_dai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLDOM 学习笔记

什么是 DOM？ DOM 是 W3C（万维网联盟）的标准。 Document Object Model（文档对象模型）的缩写。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 01.核心 ...
复制链接

扫一扫

专栏目录