本人为小白,首次写博客  有不正确的地方望多多指点与见谅!!

一,改变HTML的内容

语法:

document.getElementById(id).innerHTML=new HTML;

具体用法:(1)

document.getElementById("p1").innnerHTML="你好";//把标签p1里的内容改为你好

具体用法:(2)

var XXX=document.getElementById("p2");
XXX.innerHTML="你好,世界";

二,改变HTML的属性

语法:

document.getElementById(id).attribute = new value;

例:

document.getElementById("p3").src="XXX.jpg";//将标签p3的图片换为XXX.jpg

三,更改HTML的样式

语法:

document.getElementById(id).style.prepetry = new style;

例:

document.getElementById("p4").style.color="red";//将标签P4的内容的字体改为红色
还可以添加进事件

<h1 id="p5">你好</h1>

<button type="button" onclick="document.getElementById('p5').style.color='red'">
点击这里
</button>

JavaScript HTML Dom改变HTML的更多相关文章

  1. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

  2. JavaScript HTML DOM - 改变 HTML

    JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

  3. JavaScript HTML DOM - 改变 CSS

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElementById(id ...

  4. javascript HTML DOM 简单介绍

    JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型( ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  7. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  8. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  9. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

随机推荐

  1. 201521123081《Java程序设计》 第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 参考资料:XMIND 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集 集合 Q1. Li ...

  2. 201521123004 《Java程序设计》第3周学习总结

    1. 本周学习总结 (1)①使用构造函数(constructor) eg:Date now = new Date(); new Date(); //创建了一个Date对象 now是Date类型变量,存 ...

  3. 201521123093 java 第一周总结

    201521123093 <Java程序设计> 第一周学习总结 1.本周学习总结 (1)第一次开始接触java语言,java的用法和C不太一样.在编程序时语句比以前的长. (2)学会了使用 ...

  4. Java课程设计--GUI密码生成器201521123033

    1.团队课程设计题目 基于GUI的密码生成器 团队博客链接 2.个人负责模块 (1)界面设计 (2)部分错误输入的提示 (3)一键复制密码功能的实现 3.个人代码的提交记录截图 4.个人代码展示以及代 ...

  5. JSP引入 - UEditor 富文本编辑器

    UEditor  JSP 因为是项目第一天就导入了,现在过去一个多星期了,可能会有问题 官网:http://ueditor.baidu.com/website/ 1. 解压对应的UEditor压缩包至 ...

  6. ActiveMQ_Windows版本的安装部署

    1, 保证电脑上安装了jdk6以上版本的java,并配置了好环境变量 : 2, 官方下载地址:http://activemq.apache.org/download-archives.html ,这里 ...

  7. 小甲鱼:Python学习笔记001_变量_分支_数据类型_运算符等基础

    1.下载并安装Python 3.5.0 Python是一个跨平台语言,Python从3.0的版本的语法很多不兼容2版本,官网找到最新的版本并下载:http://www.python.org 2.IDL ...

  8. HTML超文本

    1.HTML链接 2.HTML表格 3.HTML图像 4.HTML列表 5.HTML块 6.HTML布局 7.HTML表单 1.HTML链接 (1)给文字及图片添加超链接 < html> ...

  9. vue-ajax小封装

    1. js 文件: /** ajax封装:* 1. 引入文件* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url, ...

  10. spring boot系列01--快速构建spring boot项目

    最近的项目用spring boot 框架 借此学习了一下 这里做一下总结记录 非常便利的一个框架 它的优缺点我就不在这背书了 想了解的可以自行度娘谷歌 说一下要写什么吧 其实还真不是很清楚,只是想记录 ...