JavaScript控制权

2018-06-04  本文已影响0人  Scalelength

一、认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准。

DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

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

1-(1)-节点层次图

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

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

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

注:获取的元素是一个对象,如相对元素进行操作,我们需要通过他的方法或属性。三、innerHTML属性innerHTML属性用于获取或替换HTML元素的内容。语法:object.innerHTML注意:1、Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。2、注意书写,innerHTML区分大小写。我们通过id="con"获取<p>元素,并将元素的内容输出和改变元素代码。

四、改变HTML样式

HTML DOM允许JavaScript改变HTML元素的样式。

语法:

object.style.property=new style;

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

基本属性表(property):

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

例如:

4-(1)-css样式属性

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

4-(2)-例子

五、显示和隐藏(display属性)

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

语法:

Object.sytle.display=value;

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

value取值:

none 此元素不会被显示(隐藏)

block 此元素将显示为块级元素(显示)

如图:

5-(1)-display

点击显示就显示文字,点击隐藏就隐藏文字,然后按钮上移

六、控制类名(className属性)

用代码的方式给元素赋予外观(css)

先定义变量

var p1=document.getElementById("p1");

后使用变量名调用.className属性

p1.className="class属性"

注:更完此次不会再更新JavaScript,要去看java了,本来想的就是后台,还没想过前端的事,晕晕晕。

2018年6月4日16:49:20

上一篇下一篇

猜你喜欢

热点阅读