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

一,改变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. Swing-setBorder()用法-入门

    注:本文内容转自:Swing编程边框(Border)的用法总结.内容根据笔者理解稍有整理. 函数说明: public void setBorder(Border border) 设置此组件的边框.Bo ...

  2. 201521123062《Java程序设计》第1周学习总结

    1.本章学习总结 认识Java平台运行环境,运行软件 初步认识JDK,JRE,JVM基本含义 书面作业 1.为什么java程序可以跨平台运行?执行java程序的步骤是什么? Java平台运行在各平台的 ...

  3. Python3.x 和Python2.x 区别

    1.性能Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可以取得很好的优化结果.Py3.1性能比Py2.5慢 ...

  4. 201521123023《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. (1)File可以表示一个特定文件的名称,也能表示一个目录下的一组文件的名称. (2)继承自InputStre ...

  5. Java:设计类的继承关系时的技巧

    继承设计的技巧: (1)将公共操作和域放置在超类 (2)不要使用受保护的域 有些程序员认为,将大多数的实例域定义为protected是一个不错的主意,只有这样,子类才能够在需要的时候直接访问他们.然而 ...

  6. Sql Server——基础

    前言: 在了解数据库之前,我们应该首先了解一下和数据库有关的知识,如:什么是数据,什么又是数据库等.  数据:描述事物的符号记录称为数据,它是数据库中存储的基本对象.  数据库(Datebase):数 ...

  7. C# 泛型集合

    原文出处我的wiki,转载请说明出处 考虑到泛型在集合类型中的广泛应用,这里一起讨论. 1. 泛型 1.1 泛型的定义与约束 创建泛型方法.委托.接口或类时,需要在名称后增加尖括号及其中的泛型参数,泛 ...

  8. springmvc02

    1,创建实体类对象User 注意要导入 bean-validator.jar 包 package com.yangw.springmvc.entity; import org.hibernate.va ...

  9. Ansible系列(五):playbook应用和roles自动化批量安装示例

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  10. String类的替换方法(9)

    1:String replace(char old,char new) 2:   String replace(String old,String new) 3:   trim();//去除字符串空格 ...