html dom模型一
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
<html>
<body> <p id="intro">Hello World!</p> <script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script> </body>
</html>
nodeName 属性：
nodeName 属性规定节点的名称
nodeValue 属性
nodeValue 属性规定节点的值。
nodeType 属性
nodeType 属性返回节点的类型
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
3：HTML DOM 访问：
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementById() 方法
<!DOCTYPE html>
<html>
<body> <p>Hello World!</p> <div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script> </body>
</html>
<!DOCTYPE html>
<html>
<body> <p>Hello World!</p> <div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script> </body>
</html>
4：修改html dom
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
5:HTML DOM - 元素
添加、删除和替换 HTML 元素。
6:HTML DOM - 事件
html dom模型一的更多相关文章
- DOM模型有三种
<!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...
- Fireworks Extension —— 开发篇（Dom模型）
如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- 总结一下自己脑海里的JavaScript吧（一）--DOM模型
今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...
- 肆、js的DOM模型
一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...
- 浏览器内核之 HTML 解释器和 DOM 模型
微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...
- JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）
JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...
随机推荐
- java.util.Iterator
public interface Iterator<E>: 对 collection 进行迭代的迭代器. 方法摘要: boolean hasNext() 如果仍有元素可以迭代,则返回 tr ...
- Python 学习笔记6
做人要有目标感! 继续学习Python哦.
- NOTE07152246 JAVA 发展及JDK配置
一.软件工程师体系: 操作系统(Windows/Linux/Unix) - 数据库系统 - 中间件(WebSphere/Tomcat) - JAVA EE 1.操作系统为用户构建了一个平台.此平台上可 ...
- python爬虫学习--防盗链
一 首先要了解什么是盗链 盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务商的服务内容,骗取最终用户的浏览和点击率. ...
- 12C CLONE PDB and config service_listener
Clone PDB PtestDEV to Ptestuat in testuat 1) Clone PtestDEV to Ptestuat C:\Windows\system32> ...
- dom入门
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). //显示,改变html内容 document.getElementById("p1" ...
- java类中为什么设置set和get方法操作属性
java程序规范中会建议大家尽量将类中的属性私有化,即定义为private变量,通过设置set和get函数来对属性进行操作.一些人存在这样的疑问,为什么不直接将属性设置为public,以后调用属性时直 ...
- do循环的100米自由落体
#include "stdio.h" void main() { float h=100.0,sum=100.0; ; do { sum=sum+h; h=h/; g++; }); ...
- Ubuntu+Django+mod_wsgi+Apache配置过程
Ubuntu15.10 Apache2.4( sudo apt-get install apache2 ) Python3.4( sudo apt-get install apache2 ), [系 ...
- UVA 796 Critical Links
输出桥. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...