文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。
DOM将HTML文档呈现为带有元素，属性和文本的树结构(节点树)。

HTML文档可以说由节点构成的集合，三种常见的DOM节点：

1.元素节点:上图中<html>,<body>,<p>等都是元素节点，即标签。
2.文本节点：向用户展示的内容，如<li>...</li>中的JavaScript，DOM，CSS等文本
3.属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

<a href="http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素
  网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要
通过身份证号就可以找到对应的人。那么我们可以通过id先找到标签，再进行操作。

语法： document.getElementById(“id”) 

例子：

结果:null或[object HTMLParagraphElement]

注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

innerHTML属性
   innerHTML属性用于获取或替换HTML元素的内容
语法：Object.innerHTML
注意：1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素
         2.注意书写，innerHTML区分大小写
例子：

改变HTML样式
语法：Object.style.property = new style;
注意：Object是获取的元素对象，如通过document.getElementById("ID");
基本属性表：

例子：

<p id="pcon">Hello World!</p>

<script>

   var mychar = document.getElementById("pcon");

   mychar.style.color="red";

   mychar.style.fontSize="20";

   mychar.style.backgroundColor ="blue";

</script>

　　

显示和隐藏：
语法：Object.style.display = value;
value值

JavaScript基础2---控制权DOM操作的更多相关文章

  1. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  2. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  3. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  4. JavaScript编程：使用DOM操作样式表

    6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

  5. JavaScript的BOM、DOM操作、节点以及表格（二）

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  6. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  7. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  8. JavaScript对iframe的DOM操作

    在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...

  9. JavaScript（四）——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  10. JavaScript（三）——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

随机推荐

  1. python enumerate 函数用法

    enumerate字典上是枚举.列举的意思.   C语言中关键字enum也是enumerate的缩写.   python中enumerate方法,返回一个enumerate类型.参数一般是可以遍历的的 ...

  2. libstdc++

    一.简介 二.安装 http://www.linuxfromscratch.org/lfs/view/development/chapter05/gcc-libstdc++.html 三.其他 1)l ...

  3. D_S 线性表的顺序表示和实现

    线性表的顺序表示又称为顺序存储结构或顺序映像 顺序存储定义:把逻辑上相邻的数据元素存储在物理上相邻的存储单元中的存储结构,简言之,逻辑上相邻,物理上也相邻 顺序存储方法:用一组地址连续的存储单元依次存 ...

  4. [转]SQLServer 2008数据库查看死锁、堵塞的SQL语句

    本文转自:http://www.cnblogs.com/zhuque/archive/2012/11/08/2763343.html 死锁和堵塞一直是性能测试执行中关注的重点. 下面是我整理的监控sq ...

  5. 【Ext.Net学习笔记】04：Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  6. maven总结4

     仓库.nexus 构件:在maven中,任何一个依赖(jar包).插件(maven-compiler-plugin-2.5.1.jar)或者项目输出(前面例子中运行mvn clean install ...

  7. Apache Shiro 开源权限框架

    在 Web 项目中应用 Apache Shiro 开源权限框架 Apache Shiro 是功能强大并且容易集成的开源权限框架,它能够完成认证.授权.加密.会话管理等功能.认证和授权为权限控制的核心, ...

  8. 利用ViewHolder优化自定义Adapter的典型写法

    1 public class MarkerItemAdapter extends BaseAdapter { private Context mContext = null; private List ...

  9. LUA 协程

    LUA协程和C#协程非常相似,功能与用法更强大.基础用法: coco = coroutine.create(function (a,b) print("resume args:". ...

  10. C# winform 上传文件到服务器

    1.首先要在服务器端新建一个网站axpx页 然后再网站的后台写代码获取winform传过来的文件名. 声明:这个方法虽然最简单最省事,但是上传大文件可能会报错,我的机器是10M, 超过10M就会提示报 ...