Head first javascript(六)

访问页面元素

访问页面元素通常的一个做法是给标签加上一个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";
时间: 2024-10-13 16:31:55

Head first javascript(六)的相关文章

从头开始学JavaScript (六)——语句

原文:从头开始学JavaScript (六)--语句 一.条件分支语句:if 基本格式: if (<表达式1>){    <语句组1>}else if (<表达式2>){    <语句组2>}else{    <语句组3>} 执行流程: 二.循环语句 2.1前测试循环语句:在循环体内的代码被执行之前就对出口条件求值. 2.1.1while语句 基本格式: do {    <语句组>} while (<表达式>)  执行流程

轻松学习JavaScript六:JavaScript的表达式与运算符

JavaScript脚本语言描述了一组用于操作数据值的运算符,包括一元运算符,布尔运算符,算术运算符,关系运 算符,三元运算符,位运算符和赋值运算符. 表达式是JavaScript语言的一个"短语",包含变量名(或字面量)和运算符.最简单的表达式时字面量或变量名.当 然也有合并简单的表达式来创建复杂的表达式. 一一元运算符 (1)递增++和递减-- var box1=100; ++box1;//相当于box=box+1 document.write("box1="+

&lt;JavaScript&gt; 六. window对象的属性和方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 /* 7 BOM: Browser Object Model 浏览器对象模型 8 提供了访问和操作浏览器各组件的方式 9 10 window: 浏览器窗口 JS中最大的对象, 其它对象都是它的子对象 11 location: 地址栏 12

javascript六难题

1.下面代码的运行效果是什么?为什么? <html> <head> <meta charset="utf-8"> <title>DOM进阶</title> <script type="text/javascript"> window.onload=function(){ var buttons=document.getElementsByName('button1'); for(var i=0;

javascript(六)运算符

运算符概述 JavaScript中的运算符用于算术表达式. 比较表达式. 逻辑表达式. 赋值表达式等.需要注意的是, 大多数运算符都是由标点符号表示的, 比如 "+" 和"=" . 而另外一些运算符则是由关键字表示的, 比如delete和instanceof. 关键字运算符和标点符号所表示的运算符一样都是正规的运算符. 算术运算符 赋值 y = 5, 以下表格将向你说明算术运算符的使用: 算符 描述 例子 y 值 x 值 + 加法 x = y + 2 y = 5 x

走进javascript(六)

函数表达式,函数声明: 函数声明整体提升 递归 M1: arguments.callee(); //调用自身,但在严格模式下无效 M2: 命名函数表达式 var fun2 = (function fun() { ... fun(); ... }); 闭包 有权访问另一个函数作用域中的变量的函数 for(var i=0;i<10;i++) { (function(j){ setTimeout(function(){ console.info(j); }, 1000); })(j); } 模仿块级作

用avalon和jquery做基础网页导航

url:http://zjingwen.github.io/SetTimeOutGoBlog/demoAvalon/navone/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.目录结构 二.index.html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script defer async="

js instanceof (2)

instanceof运算符可以用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上.实例一:普遍用法 A instanceof B :检测B.prototype是否存在于参数A的原型链上. 1 function Ben() { 2   3 } 4 var ben = new Ben(); 5 console.log(ben instanceof Ben);//true  实例二:继承中判断实例是否属于它的父类 1 function Ben_parent() {} 2

python基础下的web前端学习之HTML(一)

一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像.音频/视频.链接.列表.表格.样式/节.元信息.编程.(参考P76) 元素属性:基本属性.语言属性.键盘属性.内容属性.延伸属性等.(参考P82) 三.结构基础: <!DOCTYPE html> #<!DOCTYPE>元素定义文档类型为html <html lang="

go语言基本语法

Go语言 一.特点 1.函数式编程   闭包 2.工程化   资源管理,错误处理,测试文档, 3.并发编程   goroutine和channel  调度器. 4.接口编程, interface 5.全新的静态类型开发语言 6.更丰富的内置类型slice 7.错误处理: defer, panic和recover 二.语法 Package声明:表示go代码所属的包.建立一个名字为main的包,在该包中包含一个叫做main()的函数.无参,也没有定义返回值. 声明以后是import语句,引入需要的模