HTML DOM节点的增删改查

上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查。

无论在哪里,我们想要操作一个东西,总是应该先去获得它。那么我们怎么获得呢?

HTML的每一个成分都能够看作是节点(文档节点、元素节点、文本节点、属性节点、凝视节点。当中,属性节点属于元素节点)。

W3C
提供了比較方便简单的定位节点的方法和属性,以便我们高速的对节点进行操作。

分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

1.getElementById()方法

getElementById()方法,接受一个參数:获取元素的ID。假设找到对应的元素则返回该

元素的
HTMLDivElement对象,假设不存在,则返回null。

document.getElementById('box');              //获取id 为 box 的元素节点

PS:id表示一个元素节点的唯一性,不能同一时候给两个或以上的元素节点创建同一个命名的id。当我们通过getElementById()获取到特定元素节点时。这个节点对象就被我们获取到了,而通过这个节点对象。我们能够訪问它的一系列属性。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FpYmlhbjA4MjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

2.getElementsByTagName()方法

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList),这个数组保存着全部同样元素名的节点列表。

 document.getElementsByTagName('*');              //获取全部元素

无论是
getElementById还是getElementsByTagName,在传递參数的时候,并非全部浏览器都必须区分大写和小写,为了防止不必要的错误和麻烦。我们必须坚持养成区分大写和小写的习惯。

3.getElementsByName()方法

getElementsByName()方法能够获取同样名称(name)的元素。返回一个对象数组HTMLCollection(NodeList)。

   document.getElementsByName('add')   //获取input元素document.getElementsByName('add')[0].value     //获取input元素的 value值document.getElementsByName('add')[0].checked//获取input元素的checked值

4.getAttribute()方法

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有

一定差别。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').getAttribute('id');//获取元素的id 值 document.getElementById('box').id;//获取元素的id 值

document.getElementById('box').getAttribute('mydiv');//获取元素的自己定义属性值</span>

5.setAttribute()方法

setAttribute()方法将设置元素中某个属性和值。它须要接受两个參数:属性名和值。

假设属性本身已存在,那么就会被覆盖。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').setAttribute('align','center');//设置属性和值document.getElementById('box').setAttribute('bbb','ccc');//设置自己定义的属性和值</span>

6.removeAttribute()方法

removeAttribute()能够移除HTML属性。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').removeAttribute('style');//移除属性</span>

三.DOM节点

1.node节点属性

节点能够分为元素节点、属性节点和文本节点。而这些节点又有三个很实用的属性,分别为:nodeName、nodeType和nodeValue。

2.层次节点属性

节点的层次结构能够划分为:父节点与子节点、兄弟节点这两种。当我们获取当中一个元素节点的时候,就能够使用层次节点属性来获取它相关层次的节点。

四.节点操作

DOM
不单单能够查找节点,也能够创建节点、复制节点、插入节点、删除节点和替换节点。

这些方法我们都能够将之进行联系起来。这样我们才干够编成一张大的知识网,当然只知道还是不够的,我们要多运用,多找联系。多去总结。

时间: 2024-10-13 11:09:23

HTML DOM节点的增删改查的相关文章

HTML DOM(二):节点的增删改查

上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这些节点进行增删改查的操作. 获取(R) 1. getElementById(id).getElementsByName(name).getElementsByTagName(tagName),这三种方法都会忽略文档的结构. getElementById(id):通过id获取元素节点,如果页面上含有多

【jQuery】对网页节点的增删改查

本文与<[JavaScript]网页节点的增删改查>(点击打开链接)为姊妹篇,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <!DOCTYPE HTML PUBLIC "-//W3C//DT

【JavaScript】网页节点的增删改查

一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗解释,例如html节点下的内容就是<html></html>之间所有内容,b

DOM 的 CRUD增删改查

//DOM 的 CRUD // c 创建create // 1.直接往body中动态的添加标签(可以是任意类型) document.write('helloWorld'); document.write('<p>"helloworld"</p>'); // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild var div = document.createElement('div'); div.style.background

07.31《jQuery》——3.1jQuery实现DOM节点的增删改

这一小节主要讲了HTNL DOM常见的操作,包括创建节点.查找节点.插入节点.移动节点.删除节点等. 接下来上具体的代码: 代码中的注释里有上课时所整理的部分知识点: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1/jquery-3.2.1.js&quo

【mfc】学生信息管理,实现List控件节点的增删改查

之前在mfc这个专栏里面,写了很多关于win32的程序, 其实也没什么的,win32是mfc的基础, mfc只是win32的扩展,系统自带的扩展,新建一个mfc如同新建一个win32程序,不过这个win32程序一开始就带了很多空函数框架. 一.基本目标 要建立如下图所示的学生信息管理mfc程序,当然这个程序以后应该考虑连接数据库,access,sql server都可以, 同时连同<[mfc]用对话框分页实现用户登录>(点击打开链接),让用户登录之后才能够管理信息,当然这是后话. 1.这个程序

【php】数据库的增删改查和php与javascript之间的交互

使用语言操作数据库是重中之重,如果一门语言你不懂得如何操作数据库,那么你还是没有学会这门语言. php操作数据库的方法并不难 同时php的值还可以与javascript脚本之间进行控制, 一般是php的值传递到javascript中,一般不会反过来操作 一.基本目标 首先,在mysql中有一张用户信息表user, 里面的字段分别是id,username与password, 打开网页dbselect.php,首先就用php查出整张user表: 然后,插入数据的一栏,输入数据,就可把数据插入到mys

【Visual Basic】列表控件ListView的增删改查、模态对话框、禁止窗口调整大小

列表控件ListView是窗体中核心组件之一,在各种窗体程序得到广泛应用.在<[mfc]学生信息管理,实现List控件节点的增删改查>(点击打开链接)中极其难以实现列表控件ListView的增删改查,在vb中可以轻松实现,下面举一个列子来说明这个问题. 如上图的一个ListView控件,点击"添加"按钮,在弹出的模态窗口,可以为ListView控件添加相应的项. 通过"删除"按钮可以删除选中的项.通过"修改"按钮,选中的项的值将会传递

【ActionScript】ActionScript3.0对舞台组件的增删改查

以一个例子来说明ActionScript3.0对舞台组件的增删改查 如下图: 在Flash运行的时候,通过脚本,斜向下生成text0-text9十个文本节点. 提供两个功能, 1.在右上角,用户输入要删除的节点,点击"删除"之后,而删除相应的文本节点. 2.在下方,用户输入要移动的节点,然后输入合法的X与Y,则可以把节点移动到相应的地方. 一.基本布局 1.首先新建一个ActionScript3.0的Flash文件.之后如同<[ActionScript]ActionScript3