文档对象模型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. 关于CPU Cache：程序猿需要知道的那些

    天下没有免费的午餐,本文转载于:http://cenalulu.github.io/linux/all-about-cpu-cache/ 先来看一张本文所有概念的一个思维导图: 为什么要有CPU Ca ...

  2. Linux常用压缩和解压命令

    .tar 解包 tar xvf filename.tar.tar 打包 tar cvf filename.tar dirname.gz 解压1 gunzip filename.gz.gz 解压2 gz ...

  3. JS高级程序设计2nd部分知识要点5

    JS Regexp 字面量模式 用\反斜杠转义 构造函数中的字符串 也用\转义正则也用\ RegExp实例属性 global -布尔值  /g ignoreCase -布尔值 /i lastIndex ...

  4. 百度地图的简单使用 ——html js

    一.简介 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地 ...

  5. NoSql之旅--Cassandra安装篇(一)

    有点迷茫了,头脑中只想起来一句话,"那就去学习吧". 我负责的项目中有一部分用到了Cassandra,当时也看过点,但是并没有太深入的了解,既然"学习劲头"正足 ...

  6. 边工作边刷题：70天一遍leetcode: day 84-3

    Meeting Rooms I/II 要点:这题和skyline类似,利用了interval start有序的特点,从左向右处理,用一个heap来动态表示当前占用rooms的时间段,所以heap的si ...

  7. Zero

    Zero是我的极品现任BOSS曾用过的QQ昵称.那时候,我正跟京姑娘闹七年之痒,甩她而去赋闲在老家.Zero通过朋友介绍,看了我几篇零散的博客,就给我打电话,让我过来聊聊.本来我跟京姑娘也没有大矛盾, ...

  8. Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP

    题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...

  9. SpringMVC 通过post接收form参数或者json参数

    springmvc的controller很多都用来提供restful服务,成为多功能action 同一个接口既能够提供给web端,也可以提供给ios以及安卓 @RequestBody 可以把接收到的j ...

  10. unix基本命令日记

    鉴于命令经常忘记,网站文章鱼龙混杂,很多不适合自己,现在记录方便自己查看.每个人的基础不同,需要合适的文章也不一样. 用户管理 useradd 功能说明:建立用户帐号. 语 法:useradd [-m ...