码迷,mamicode.com
首页 > 编程语言 > 详细

Head first javascript(六)

时间:2014-08-30 22:55:30      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:des   style   io   java   strong   ar   div   html   sp   

访问页面元素

访问页面元素通常的一个做法是给标签加上一个id,然后可以通过getElementById()函数来实现,如:

<div id = "sceneimg">...</div>

var sceneDescription = document.getElementById("scenetext")

 

还有一种方法是通过标签的名字来进行访问,getElementsByTagName()函数可以得到这个标签的所有页面元素,以数组的形式存储,按照在页面出现的先后顺序,如:

<img ... src... >
<img ... src... >
<img id = "milk" src... >
<img ... src... >

//两种访问方式相同
document.getElementById("milk")
document.getElementsByTagName("img")[2]
innerHTML

通过getElementById()可以得到某一个id的对象,要进一步得到标签里面的文本内容则可以通过innerHTML属性,也可以对内容进行修改,如:

document.getElementById("cake").innerHTML = "so <strong>good</strong>!";
DOM: document object model

网页的结构可以说是由一些结点(node)组成的,这些结点就是大大小小的标签,包括最外面的<html>到<head><body>等,再到里面的<div>这些。假设<html>为根结点,如果某个标签是嵌套在另一个标签里面的,那么在这棵结点树中这个标签就是另一个标签的后代。处在第一层的是document,然后到<html>,然后是各种嵌套的元素。每个元素有2个属性text和attribute,text是文本内容,是树中该元素的子结点,attribute是标签的一些属性.

每个结点都有一些可以帮助遍历这棵树的属性,包括

  • nodeValue : 只是text或者attribute结点有
  • nodeType : document或者text,用数字表示
  • childNodes : 所有子结点的一个数组
  • firstChild
  • lastChild
通过结点的方式修改text的内容

可以分为三步来完成:

  1. 移除该结点的所有子结点
  2. 用需要替换的新文本text创建一个新的结点
  3. 将新的节点加到原来的结点中成为它的子结点

如:

var node = document.getElementById("story");
while(node.firstChild)
    node.removeChild(node.firstChild);
node.appendChild(document.createTextNode("new text");

//其实作用相当与一句
document.getElementById("story").innerHTML = "new text";
CSS 和 DOM
<span id = "decision1" class = "decision" onclick...></span>
<span id = "decision2" class = "decision" onclick...></span>

class是CSS组织渲染对象的一种方式,可以给"decision"这个类一些style

<style type = "text/css">
span.decision{
    font-weight...
    ...
    }
</style>

node对象里面的className属性可以访问到该结点的类class,也能够进行修改,如:

document.getElementById("decision1").className = "decisioninverse";
隐藏页面的某个对象

可以修改style里面的visibility属性,如:

document.getElementById("...").style.visibility = "visible";
document.getElementById("...").style.visibility = "hidden";

Head first javascript(六)

标签:des   style   io   java   strong   ar   div   html   sp   

原文地址:http://www.cnblogs.com/jolin123/p/3946895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!