认识DOM

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

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

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

1. 元素节点:上图中<html><body><p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"。

看下面代码:

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

通过ID获取元素

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

 document.getElementById(“id”)

看看下面代码:

结果:null或[object HTMLParagraphElement]

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

innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下:

结果:

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:

<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>

结果:

显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

作用:

1.获取元素的class 属性

  1. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码,获得 <p> 元素的 class 属性和改变className:

结果:

JavaScript学习笔记 - 入门篇(3)- DOM操作的更多相关文章

  1. JavaScript学习笔记 - 入门篇(1)- 准备

    为什么学习JavaScript 一.你知道,为什么JavaScript非常值得我们学习吗? 所有主流浏览器都支持JavaScript. 目前,全世界大部分网页都使用JavaScript. 它可以让网页 ...

  2. JavaScript学习笔记 - 入门篇(2)- 常用互动方法

    输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用""括起,直 ...

  3. PHP学习笔记 - 入门篇(3)

    PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...

  4. PHP学习笔记--入门篇

    PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...

  5. PHP学习笔记 - 入门篇(5)

    PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...

  6. PHP学习笔记 - 入门篇(4)

    PHP学习笔记 - 入门篇(4) 什么是运算符 PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要 ...

  7. JavaScript学习笔记 - 进阶篇(8)- DOM对象,控制HTML元素

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  8. Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  9. JavaScript学习笔记 - 进阶篇(1)- JS基础语法

    前言 JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么? 在JavaS ...

随机推荐

  1. 第十五篇 用户认证auth

    用户认证auth 阅读目录(Content) 用户认证 auth模块 1 .authenticate() 2 .login(HttpRequest, user) 3 .logout(request) ...

  2. docker安装出现"Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?"

    今天按照这个教程使用WSL安装docker时遇到了个问题: 使用命令:$ docker search mysql 出现:Cannot connect to the Docker daemon at u ...

  3. location - 修改url后 - 重新加载

    window.location.href = window.location.pathname + search;

  4. 关于 python 中 虚拟环 virtualen境的操作

    python3.X安装和pip安装方法 pip install -i https://pypi.douban.com/simple XXX 1.安装virtualenv pip install vir ...

  5. python虚拟环境配置(下)

    前言 嘿,各位小伙伴们,晚上好呀,新年快乐,注意预防流感哈,就不要出去浪了,万一中奖了,嗯...,还是当个宅男,宅男无敌,哈哈哈, 过年了,村都被封了,哎,出都出不去,想着干点啥,就把以前没完善的继续 ...

  6. UVA 11992 懒惰标记应用

    这个题目要求和 还有 设置区间值 区间增值,明显要用线段树来 由于行数不超过20 而列数多达 10^5,所以对每一行建一棵线段树. 然后主要是在懒惰标记方面是难点 针对两种操作 分别设置 set 和 ...

  7. 尝试用kotlin做一个app(三)

    新闻列表 添加新闻列表可以使用RecyclerView.但是有个问题,RecyclerView只会在内部滚动,不会带动整个屏幕滚动.所以在原根布局外层添加androidx.core.widget.Ne ...

  8. ArchLinux安装(BIOS)

    ArchLinux安装(BIOS) 说在前头:在经历过无数次的失败尝试过后总结出的可用的安装过程(比官方的简单一点) 官方安装指导 一.连接网络 1.连接 # wifi-menu 2.检查是否联通 ( ...

  9. 开始linux课程预习工作

    预习的过程,就是在老师讲课之前,自己学习的过程.重点,难点,疑点,不等老师先讲,自己先趟一遍,老师在讲的时候,相信会吸收的更好一些.

  10. VUE常见的语法

    模版渲染{{msg}} v-html="" v-text="" v-bind:id=""  类似 attr 三元判断 {{ok?'yes': ...