上篇博客中,我们已经初步接触了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()获取到特定元素节点时。这个节点对象就被我们获取到了,而通过这个节点对象。我们能够訪问它的一系列属性。

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()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有

一定差别。

document.getElementById('box').getAttribute('id');//获取元素的id 值 document.getElementById('box').id;//获取元素的id 值

document.getElementById('box').getAttribute('mydiv');//获取元素的自己定义属性值5.setAttribute()方法

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

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

document.getElementById('box').setAttribute('align','center');//设置属性和值document.getElementById('box').setAttribute('bbb','ccc');//设置自己定义的属性和值6.removeAttribute()方法

removeAttribute()能够移除HTML属性。

document.getElementById('box').removeAttribute('style');//移除属性三.DOM节点

1.node节点属性

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

2.层次节点属性

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

四.节点操作

DOM

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

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

html增删改查按钮控件,HTML DOM节点的增删改查相关推荐

  1. 【Qt】Qt 开发桌面程序 ( Qt 版本 5.14.2 | 编辑 Qt 桌面按钮控件 | 修改按钮文本 | 为按钮添加点击事件 | 系统调用 | 去掉系统调用命令窗口 )

    文章目录 一.添加按钮控件 二.修改按钮文本 三.为按钮添加点击事件 ( 弹出对话框 ) 四.为按钮添加点击事件 ( 打开记事本 ) 五.为按钮添加点击事件 ( 打开计算器 ) 六.去掉系统调用时弹出 ...

  2. 按钮控件里面的间距问题

    一个简单的按钮,里面可能不仅仅是显示文字,让我们去点击,一个按钮控件,子控件可能会有一个图片, 当然,也可能会包含一个图片和文字,里面还嵌套着内部间距等各种问题.(也要值得注意的的是这里的图片不是通过 ...

  3. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,但是我们学习是为了能够更好地应用,今天我们就来看看DOM节点的增删改查. 不管在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  4. 在access窗体中加图片_Access实战:一种不用按钮控件就能控制子窗体联动的方法...

    近来宇哥潜心研究Access的设计,多有心得,在此共享一二.Access窗体若要进行控制,是需要通过按钮控件的,我经过自己探索,发现了一种更加简单的方法,也就是不用控件,通过直接点击窗体已有的表格,就 ...

  5. QT旋转按钮控件的实现

    目录 一.实现需求:鼠标hover时旋转 二.实现方式:计时器做动画 三.代码实现 QT旋转按钮控件的实现 一.实现需求:鼠标hover时旋转 需求是:实现类似于WINDOWS下,某些软件窗口关闭按钮 ...

  6. Winform中实现自定义水晶按钮控件(附代码下载)

    场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个用户 ...

  7. 【DND图形库】五、按钮控件与音效

    五.按钮控件与音效 (甲)按钮控件 在DND.h里能看到有哪些控件,基本上都以静态工厂模式创建: ///GUI/// #include "DNDGUI.h" //GUI 控件基类 ...

  8. C#窗体控件-按钮控件Button

    按钮(Button)控件几乎存在于所有Windows对话框中,是Windows应用程序中最常用的控件之一.按钮控件允许用户通过单击来执行操作.按钮最重要的事件,也是最常用的事件就是Click.当用户单 ...

  9. VS2010/MFC编程入门之二十三(常用控件:按钮控件的编程实例)

    上一节VS2010/MFC编程入门教程中鸡啄米讲了按钮控件Button.Radio Button和Check Box的基本用法,本节就继续讲按钮控件的内容,通过一个实例让大家更清楚按钮控件在实际的软件 ...

最新文章

  1. PLT、POT、延迟绑定
  2. MYSQL基础语法的使用
  3. LA4238 Area of Polycubes(立方体的表面积)
  4. asp建站系统源码_网站建设教程:虚拟主机如何安装PageAdmin建站系统
  5. 百练OJ:2764:数根
  6. 六、最通俗易懂的JavaScript进阶教程(二)
  7. python三级字典_python_三级字典
  8. 十进制转二进制转换c语言程序,c语言编程如何实现-十进制数转换成二进制和 – 手机爱问...
  9. Linux下连接Mysql服务器的方式
  10. Flink编程入门(二)
  11. linux新手常用命令
  12. 在Python中处理大型文件的最快方法
  13. 【java】for循环的应用
  14. Citrix为什么要兼容第三方服务器虚拟化平台
  15. 小米开发版安装magisk_小米6x-从零开始安装magisk
  16. ATE软件测试工程师,ATE软硬件测试开发工程师/高级工程师
  17. python 序列去重并保持原始顺序
  18. 千钧一发之际赢得暂缓令,苹果App Store要反败为胜了?
  19. 关于登陆百度等网站显示‘’隐私设置错误”的问题
  20. CSS中表示cellpadding和cellspacing的方法

热门文章

  1. 开发者应当熟知的 C# 序列化和反序列化
  2. 程序员去交友网站找女友,结果意外了...
  3. 阿里在美申请区块链专利;Win10 最新漏洞被发现;MongoDB 4.2 发布​ | 极客头条...
  4. CPU 是如何工作的?
  5. 面试稳了!BATJ 等大厂 400+ 道面试题全汇总!
  6. 5G 商用时,我们所处的智能城市会是什么样?
  7. 4G + 1G = 5G?
  8. Google 要进军游戏行业了?!
  9. 苹果抛弃英特尔!TCL 怼格力 500 亿不够做芯片;高德地图上线叫车 | CSDN 极客头条...
  10. 灵魂拷问!软件架构师书籍