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值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java达人

jquery常用选择器

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用...

2166
来自专栏lonelydawn的前端猿区

css选择器

下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

1956
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1243
来自专栏小古哥的博客园

JavaScript事件对象与事件的委托

事件对象 包含事件相关的信息,如鼠标、时间、触发的DOM对象等  js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: doc...

3425
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

771
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

4559
来自专栏互联网软件技术

添加标签——无给定标签选项

1283
来自专栏柠檬先生

css3弹性盒子模型——回顾。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

2238
来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

3116
来自专栏用户2442861的专栏

display:inline、block、inline-block的区别

http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

991

扫码关注云+社区

领取腾讯云代金券