HTML DOM 方法

方法是我们可以在节点(HTML 元素)上执行的动作。


编程接口

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)。

属性是您能够获取或设置的值(比如节点的名称或内容)。

getElementById() 方法

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

例子

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
</script>

</body>
</html>

查看结果:

Hello World!

本例演示 getElementById 方法!

来自 intro 段落的文本:Hello World!


HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法:

  • getElementById(id) - 获取带有指定 id 的节点(元素)
  • appendChild(node) - 插入新的子节点(元素)
  • removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

一些 DOM 对象方法

时间: 2024-10-05 10:36:39

HTML DOM 方法的相关文章

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

Dom方法,解析XML文件

Dom方法,解析XML文件的基本操作 1 package com.demo.xml.jaxp; 2 3 import java.io.IOException; 4 5 import javax.xml.parsers.DocumentBuilder; 6 import javax.xml.parsers.DocumentBuilderFactory; 7 import javax.xml.parsers.ParserConfigurationException; 8 import javax.x

innerHTML对比DOM方法,哪个性能好?有什么区别?

innerHTML对比DOM方法,哪个性能好?有什么区别?是个老生常谈的问题!跟浏览器版本与发展有关! innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持: 作为原生支持,innerHTML在各主流浏览器下的执行效率是很高的: 但是他有他的缺陷,特别是在ie低版本浏览器下,不支持html5.还有一些其他的标签属性. 直接测试的话,速度明显innerHTML比DOM方法要快很多(包括撸代码的速度),但是有说在webkit内核的浏览器中DOM方法比innerHTML要快. 平时采用j

DOM方法index()相关问题(为何$(this).index(this)是错误的 )

index() 方法返回指定元素相对于其他指定元素的 index 位置. 完全语法为:$(selector).index(element) ,其中element为可选参数. 1.若是省略element,则 获得第一个匹配元素相对于其同胞元素的 index 位置. 例如在如下代码中 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></sc

第一话:IE中用DOM方法绑定事件

工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重的去思考和记录一下. 一.浏览器中不同的事件监听/绑定(个人感觉用监听比较通俗易懂): //IE element.attachEvent("event",functionname); //参数:1,表示监听的事件,需要在事件前加on(onclick,onfocus,onkeyevent……

before(),after(),prepend(),append()等新DOM方法简介

一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于DOM标准也是在不断升级进步,而且浏览器也在悄悄地进行跟进与支持. 然而,这种跟进与支持呢非常的低调与隐讳:加上行业的话语权大部分集中在JS工程师身上,同时DOM这种东西比较"低级"撑不起场面,因此各种什么技术大会啊,分享会议啊绝对不会讲这玩意儿的. 于是都叫他注意力很容易被带走,而没有意识

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)

<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title>

DOM&ndash;(w3school)1.DOM 方法

一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. appendChild() 把新的子节点添加到指定节点. removeChild() 删除子节点. replaceChild() 替换子节点. ins