js 操作html dom
author:冯永贤（Tony Feng，鸡鸣星）,文章整合：internet
《HTML DOM》
一：js能够改变HTML DOM 里面的什么内容
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反
二：但js要对html的内容进行修改时，必须得找到该内容的标识，
那么这个标识是什么呢？
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
<1>通过 id 查找 HTML 元素
如：x=document.getElementById("id name");
调试链接：http://www.runoob.com/try/try.php?filename=try_dom_getelementbyid
<2>通过标签名查找 HTML 元素
如下代码：
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");（将id=“main”的标识值付给x）
var y=x.getElementsByTagName("p");（在x下面的p标签里）
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
<3>通过类名找到 HTML 元素
与通过id找html元素一样，把ById改为ByClassName即可
如：var x=document.getElementById("intro");
三：那么怎么操作呢？
- 如何改变 HTML 元素的内容 (innerHTML)
- 如何对 HTML DOM 事件对做出反应
- 如何添加或删除 HTML 元素
1.改变 HTML 输出流（document.write() 可用于直接向 HTML 输出流写内容。）
例子调试链接：http://www.runoob.com/try/try.php?filename=trydhtml_date
2.改变 HTML 内容（修改 HTML 内容的最简单的方法时使用 innerHTML 属性。）
例子调试链接：http://www.runoob.com/try/try.php?filename=tryjs_change_innerhtml
3.改变 HTML 属性（
如需改变 HTML 元素的属性，请使用这个语法：
）
例子调试链接：http://www.runoob.com/try/try.php?filename=trydhtml_dom_image
注：
- 上面的 HTML 文档含有 id="image" 的 <img> 元素
- 我们使用 HTML DOM 来获得 id="image" 的元素
- JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
js 操作html dom的更多相关文章
- 原生js操作HTML DOM
先上图 1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表( ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- js操作bom和dom
Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
随机推荐
- scala 定时器
假如我们要开发一个定时器,该定时器每秒钟执行一定的动作,我们如何把要执行的动作传给定时器?最直观的回答是:传一个实现动作的函数(function) object Helloworld { def on ...
- (转)AppCan中调用系统浏览器打开网页
<!DOCTYPE html> <html> <head> <style>body{ background:#fff; font-size:30px;} ...
- 机器学习：SVM（SVM 思想解决回归问题）
一.SVM 思想在解决回归问题上的体现 回归问题的本质:找到一条直线或者曲线,最大程度的拟合数据点: 怎么定义拟合,是不同回归算法的关键差异: 线性回归定义拟合方式:让所有数据点到直线的 MSE 的值 ...
- PAT L3-008. 喊山(BFS)C4 初赛30分
喊山(30 分) 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂—喂喂喂……”的呼唤.呼唤声通过空气的传递,回荡于深谷之间,传送到人们耳中,发出约定俗成的“讯号”,达到声讯传递交流的目的. ...
- 如何平衡MMO游戏
转自:http://blog.sina.com.cn/s/blog_9f56a65f01013eti.html 前言 这是一篇出自国外博客“Elder Game”的一篇文章,笔者觉得里面很多东西说的很 ...
- Ubuntu bash不记录history方法
很多都是用: unset HISTORY HISTFILE HISTSAVE HISTZONE HISTORY HISTLOG export HISTFILE=/dev/null export HIS ...
- 重新认识synchronized（下）
synchronized既保证原子性,又保证内存可见性,是一种线程同步的方式,是锁机制的一种java实现.synchronized的实现基于JVM底层,JVM是基于monitor实现的,而monito ...
- java 字符串和集合互相转换
今天在写项目的时候遇到一个问题,就是要把得到的一个集合转换成字符串,发现 import org.apache.commons.lang.StringUtils; 有这么一个简单的方法:String s ...
- redis学习四 复制
1,单机创建多实例 一个redis服务器安装多个redis实例,每个实例对应一个端口.默认端口是6379. 将redis.conf配置文件复制一份到另外一个文件夹下,然后修改其中的信息即可. pi ...
- HBase入门基础教程 HBase之单机模式与伪分布式模式安装
在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hado ...