首页 > 其他分享 >HTML DOM对象-方法和属性

HTML DOM对象-方法和属性

时间:2024-01-11 14:44:42浏览次数:22  
标签:DOM 元素 HTML 事件 节点 属性

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法:

  • getElementById(id) - 获取带有指定 id 的节点(元素)
  • getElementsByTagName()  返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 返回节点列表。节点列表是一个节点数组。
  • getElementsByClassName()  返回包含带有指定类名的所有元素的节点列表。
  • appendChild(node) - 插入新的子节点(元素)
  • removeChild(node) - 删除子节点(元素)必须清楚该元素的父元素
  • replaceChild() 替换子节点。
  • insertBefore() 在指定的子节点前面插入新的子节点。
  • createAttribute() 创建属性节点。
  • createElement() 创建元素节点。
  • createTextNode() 创建文本节点。
  • getAttribute() 返回指定的属性值。
  • setAttribute() 把指定属性设置或修改为指定的值。

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点 可以通过这个属性查找到节点的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点
  • nodeValue 属性 
    • 元素节点的 nodeValue 是 undefined 或 null
    • 文本节点的 nodeValue 是文本本身
    • 属性节点的 nodeValue 是属性值
  • 修改 HTML DOM 意味着许多不同的方面:

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

onload和onunload事件

当用户进入或离开页面时,会触发 onl oad 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

<body onl oad="checkCookies()">

onchange事件

onchange 事件常用于输入字段的验证。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onm ouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onm ousedown 事件,然后,当鼠标按钮被松开时,会触发 onm ouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。

导航节点关系

能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。

DOM根节点

  • document.documentElement - 全部文档
  • document.body - 文档的主体

标签:DOM,元素,HTML,事件,节点,属性
From: https://www.cnblogs.com/XiaoOuketang/p/17957121

相关文章

  • html换行的几种方式
    建议:不管采用哪种方式,就单一的选择一种,尽量保持编码的一致性,在写js处理页面的时候,也方便。html换行:<br>标签<br>标签是最简单的换行符,示例:<div>这是一段换行的示例。这是<br>一段换<br>行的示例。</div> 使用<p></p>进行html的换行。在一些富文本编辑器里,换行用的并......
  • Python Flask html 模板的继承
    前言全局说明一、安装flask模块官方源:pip3installflask==2.3.2国内源:pip3installflask==2.3.2-ihttp://pypi.douban.com/simple/--trusted-hostpypi.douban.com以上二选一,哪个安装快用哪个flask安装时间2023-11更多国内源:https://www.cnblogs.com/wutou......
  • dom内置对象有哪些
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • html5和css3有什么新特性
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 【转载】SAP程序属性中的固定点算术
    【转载地址】:https://www.cnblogs.com/zohoo/p/17337504.htmlSAP程序创建时,程序属性面板中有一个选项叫做“固定点算术”,默认是勾上的,如下图所示:通过按F1在该选上调取帮助说明,可以看到官方是这样解释的:如果标记该复选框,该程序中的所有计算都将使用定点运算。如果未标......
  • HTML+CSS+JS 实现苹果手表表盘
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>仿苹果手表表盘</title><......
  • Python教程(22)——Python面向对象的属性和方法
    在Python面向对象编程中,属性和方法是类及其对象的重要组成部分。如果说封装、继承和多态是面向对象编程中的思想,那么类的属性和方法就是骨架,因为有属性和方法,面向对象编程才变的有血有肉。属性属性是类或对象所拥有的数据,它用于描述对象的特征和状态。属性可以是实例属性(对象特......
  • 前端三剑客——HTML5+CSS3+JavaScript
    核心技术●实战训练营●项目实战(微视频版)  《前端三剑客——HTML5+CSS3+JavaScript》采用“核心技术→实战训练营→企业级项目实践”的结构和“由浅入深,由深到精”的模式进行讲解。  全书科学设置七大阶段由浅入深循序渐进,为解决实际问题而生。第一阶段、第三阶段、第五阶段......
  • jQuery操作DOM对象
    jQuery的DOM操作创建节点创建节点后可以通过HTML()或text()来设置内容举个例子:<script>$("button").html("点击一下");</script>添加节点注意:①after()和before()用于同级操作元素。目标对象.after/before(插入对象) ②append()方法和appendTo()方法,都是......
  • 248-html中的DOMContentLoaded事件
    DOMContentLoaded事件在HTML文档解析完成,并且所有的DOM元素已经创建完成,但是在页面的样式表、图像和子框架之类的外部资源加载完成之前触发。这个事件通常用于在页面完全加载之前执行一些JavaScript代码,而无需等待其他资源的加载。DOMContentLoaded事件相较于load事件而言......