蓝旭工作室2023春季培训预习博客（五）

最新推荐文章于 2024-05-11 19:26:37 发布

D1gnity_

最新推荐文章于 2024-05-11 19:26:37 发布

阅读量178

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/D1gnity_/article/details/130248849

版权

1.1 getElementById() 方法

1.2 getElementsByTagName() 方法

1.3 getElementsByClassName() 方法

前言

第三周有一个需了解的内容，如下

DOM（文档对象模型）

一. 什么是DOM

DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）。

文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。

DOM分为文档，对象，模型：

文档：表示的时整个HTML网页文档 document；
对象：表示将网页中的一个部分都转换为一个对象 object；
模型：使用模型来表示对象之间的关系，这样方便获取对象 model；

二. 节点层级

任何HTML 或XML 文档都可以用DOM表示为一个由节点构成的层级结构。节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。

详情可以参考这篇博客：http://t.csdn.cn/UrRmMhttp://t.csdn.cn/UrRmM

三. DOM方法

HTML DOM方法是我们可以在节点（HTML 元素）上执行的动作

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

四. 获取元素

获取元素分为获取目标元素和获取元素内容

1. 获取目标元素

通过Id，class，或者标签等多种途径获取目标元素

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

1.1 getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：

 node.getElementById("id");
//如document.getElementById("box1");

1.2 getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素：

 node.getElementsByTagName("tagname"); 
//如document.getElementsByTagName("p");    返回包含文档中所有 <p> 元素的列表
//又如document.getElementById("main").getElementsByTagName("p");    返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）

1.3 getElementsByClassName() 方法

查找带有相同类名的所有 HTML 元素

 node.getElementById("classname");
//如 document.getElementsByClassName("box1");

2. 获取元素内容

innerHTML解析内容包含HTML标签，获取的内容包括空白换行等；
innerText只解析纯文本，不包含HTML标签，获取的内容会去掉换行和缩进等空白；

五. DOM修改

DOM修改包含：

改变 HTML内容
改变 CSS样式
改变 HTML属性
创建新的 HTML元素
删除已有的 HTML 元素
改变事件（处理程序）

使用对象.属性=‘指定值’方法修改

修改元素属性：src、herf、title等
修改普通元素内容：innerHTML、innerText等
修改表单元素：value、type、disabled等
修改元素样式：style、className等

语法：

element.innerHTML = new html content    //改变元素内容: inner HTML
element.attribute = new value	//改变 HTML 元素的属性值
element.setAttribute(attribute, value)    //改变 HTML 元素的属性值
inputelement.value = new value    //改变 input 元素的 value 值
element.style.property = new style    //改变 HTML 元素CSS样式

六. DOM事件

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。

事件组成部分：

事件源，通过获取获取元素的方式获得
事件类型， JS常用事件(使用时在最前面加上on)
事件处理程序，通过函数赋值的方式完成

常用事件(使用时在最前面加上on)
        //  blur 失去焦点
        //  change 下拉列表选项中项改变或文本框内容改变
        //  click 鼠标点击  
        //  dbclick 鼠标双击
        //  focus 获得焦点
        //  keydown键盘按下
        //  keyup 键盘弹起
        //  load 页面加载完毕
        //  mousedown 鼠标按下
        //  mouseover 鼠标经过
        //  mousemove鼠标移动
        //  mouseout 鼠标离开
        //  mouseup 鼠标弹起
        //  reset 表单重置
        //  select 文本被选择
        //  submit 表单提

1. 对事件做出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

<!DOCTYPE html>
<html>
    <body>
        <h1  onclick = "this.innerHTML='Hello!' "> 点击此文本！</h1>
    </body>
</html>

从事件处理程序中调用函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

D1gnity_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蓝旭工作室2023春季培训预习博客（五）

第三周有一个需了解的内容，如下DOM（文档对象模型）DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）。文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
复制链接

扫一扫