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

一,改变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. 201521123055 《Java程序设计》第8周学习总结

    1. 本章学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) public static List<String> convertStringToList(String ...

  2. 201521123011《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 com.p ...

  3. 201521123030《Java程序设计》第5周学习总结

    1. 本周学习总结 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 因为i在类中是priv ...

  4. 201521123064 《Java程序设计》第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本章学习总结 1.1 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. ① InetAddress(IP地址对应的类) InetAd ...

  5. 201521123020《java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  6. 201521123024 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容.

  7. Ansible系列(六):各种变量定义方式和变量引用

    本文目录:1.1 ansible facts1.2 变量引用json数据的方式 1.2.1 引用json字典数据的方式 1.2.2 引用json数组数据的方式 1.2.3 引用facts数据1.3 设 ...

  8. 使用Spring的隐式注解和装配以及使用SpringTest框架

    SpringTestConfiguration 1.加入jar 包spring-test-4.3.9.RELEASE.jar 2.写基本的Component 注意级联状态下  需要给需要调用的属性加入 ...

  9. nmap扫描某段网络连通性

    nmap -v -sP 10.0.10.0/24 进行ping扫描,打印出对扫描做出响应的主机,不做进一步测试(如端口扫描或者操作系统探测): nmap -sP 192.168.1.0/24 仅列出指 ...

  10. Spark官方2 ---------Spark 编程指南(1.5.0)

    概述 在高层次上,每个Spark应用程序都由一个运行用户main方法的driver program组成,并在集群上执行各种 parallel operations.Spark提供的主要抽象是resil ...