JavaScript基础2---控制权DOM操作
文档对象模型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操作的更多相关文章
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- JavaScript编程：使用DOM操作样式表
6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...
- JavaScript的BOM、DOM操作、节点以及表格（二）
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
- JavaScript 基础(四) - HTML DOM Event
HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...
- JavaScript对iframe的DOM操作
在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...
- JavaScript（四）——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- JavaScript（三）——DOM操作一
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...
随机推荐
- php多线程pthreads的安装与使用
安装Pthreads 基本上需要重新编译PHP,加上 --enable-maintainer-zts 参数,但是用这个文档很少:bug会很多很有很多意想不到的问题,生成环境上只能呵呵了,所以这个东西玩 ...
- JQ工具函数
在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数 主要作用于:字符串.数组.对象 API:工具函数 ...
- PPT制作教程：如何制作ppt
PowerPoint(PPT)是专门用于制作演示文稿(俗称幻灯片).广泛运用于各种会议.产品演示.学校教学等.学会如何制作ppt,成为提升工作效 率的好帮手.PPT包含有很多的功能,我们可以根据个人喜 ...
- JavaScript生成GUID的算法
全局唯一标识符(GUID,Globally Unique Identifier)也称作 UUID(Universally Unique IDentifier) . GUID是一种由算法生成的二进制长度 ...
- Linux下Mysql安装
1.下载安装包 首先查看Linux版本: [root@localhost ~]# lsb_release -a LSB Version: :core-4.0-amd64:core-4.0-noarch ...
- 三星嵌入式开发平台 三星Cortex-A9 4412 POP与SCP对比
iTOP-4412核心板是迅为电子推出的一款高端四核核心板,其中分为POP封装与SCP封装,配备三星Exynos 4412四核处理器,主频为1.4GHz,内置16GB存储空间.该板设计小巧.配备三星自 ...
- Gnome创建桌面快捷方式
Ctrl+Alt+T打开终端 输入gnome-desktop-item-edit 桌面/ --create-new (注: 桌面/ 要改为你桌面文件夹所在路径) 配置快捷方式属性,在“命令(A)”这行 ...
- HDU 1695 GCD （莫比乌斯反演）
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- 《TCP/IP详解 卷一》读书笔记-----DNS
1.DNS是一个分布式数据库系统用来提供主机名和IP地址之间的映射,之所以称为分布式原因的原因是因特网上没有一台主机知道这类映射的全部信息,当然也不可能做到,因为数据量实在太大了 2.应用程序通过一个 ...
- 写一个iOS VoIP应用需要知道什么?
IOS编程--VoIP解密 一般来说, IOS很少给App后台运行的权限. 仅有的方式就是 VoIP. IOS少有的为VoIP应用提供了后台socket连接,定期唤醒并且随开机启动的权限.而这些就是I ...