DOM 节点

包含的节点内容：

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

1：HTML DOM 常用方法方法

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

2：HTML 的属性：

innerHTML

  1. <html>
  2. <body>
  3.  
  4. <p id="intro">Hello World!</p>
  5.  
  6. <script>
  7. var txt=document.getElementById("intro").innerHTML;
  8. document.write(txt);
  9. </script>
  10.  
  11. </body>
  12. </html>

nodeName 属性：

nodeName 属性规定节点的名称

nodeValue 属性

nodeValue 属性规定节点的值。

nodeType 属性

nodeType 属性返回节点的类型

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

3：HTML DOM 访问：

  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法
  • 通过使用 getElementById() 方法
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <p>Hello World!</p>
  6.  
  7. <div id="main">
  8. <p>DOM 很有用！</p>
  9. <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
  10. </div>
  11.  
  12. <script>
  13. x=document.getElementById("main").getElementsByTagName("p");
  14. document.write("div 中的第一段的文本: " + x[0].innerHTML);
  15. </script>
  16.  
  17. </body>
  18. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <p>Hello World!</p>
  6.  
  7. <div id="main">
  8. <p>DOM 很有用！</p>
  9. <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
  10. </div>
  11.  
  12. <script>
  13. x=document.getElementById("main").getElementsByTagName("p");
  14. document.write("div 中的第一段的文本: " + x[0].innerHTML);
  15. </script>
  16.  
  17. </body>
  18. </html>

4：修改html dom

修改 HTML DOM 意味着许多不同的方面：

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

5:HTML DOM - 元素

添加、删除和替换 HTML 元素。

6:HTML DOM - 事件

html dom模型一的更多相关文章

  1. DOM模型有三种

    <!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...

  2. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  3. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  4. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...

  5. Fireworks Extension —— 开发篇（Dom模型）

    如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...

  6. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  7. 总结一下自己脑海里的JavaScript吧（一）--DOM模型

    今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...

  8. 肆、js的DOM模型

    一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...

  9. 浏览器内核之 HTML 解释器和 DOM 模型

    微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...

  10. JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）

    JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...

随机推荐

  1. mvc路由参数注解

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //过滤掉禁止访问的路由 routes.MapRoute( name: &quo ...

  2. Find The Multiple（bfs）

    Find The Multiple Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) T ...

  3. linux配置永久ip不生效解决方法

    本文原文来自 http://blog.csdn.net/zymx14/article/details/51472239 linux下使用ifconfig eth0 ip地址可以设置ip地址 ,命令为: ...

  4. Ubuntu 12.04 中自定义DNS服务器设置

    首先我们需要创建一个文件/etc/resolvconf/resolv.conf.d/tail: #vim /etc/resolvconf/resolv.conf.d/tail 然后我们在这个文件里写入 ...

  5. log4net 日志文件占用，不能及时释放

    在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />

  6. jquery-图片轮播（新手请大神指教一下）

    这是我刚学jquery写的,感觉效果不是很好. #scrollPics{ height: 330px; width: 980px; margin-bottom: 10px; overflow: hid ...

  7. html5学习(一) video字段

    html5对视频的支持: html5通过<video></video>字段实现web页面上视频的播放功能. 目前各大浏览器对<video>字段的支持: 当前,vid ...

  8. HDU 5795 A Simple Nim

    打表找SG函数规律. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...

  9. IIS6 伪静态

    1. 设置IIS--主目录--脚本映射那一个属性 2.必须还要上传自己的urlrewriter组件,并在config里做相应的设置 二者缺一不可

  10. OPENWRT make defconfig错误之一

    make defconfig rm: cannot remove `tmp/.host.mk': Permission denied 退到trunk上级目录 su root sudo chown -R ...