JavaScript控制权
一、认识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