JavaScript DOM编程艺术-语法/DOM

来源：互联网发布：阮一峰javascript pdf 编辑：程序博客网时间：2024/05/17 08:49

语法：

JavaScript是一种脚本语言，JavaScript脚本通常只能通过Web浏览器去完成某种操作而不是像普通意义上的程序那样可以独立运行

注释

1.//

2. /*

3.<!- ->每行都必须在开头加上“<!-”来作为标志。

//变量
var height = "about 5'10\" tall";
var temperature = -20.333;
var sleeping = true;
var beatles = Array(4); //var beatles = array("John", "Paul", "George", "Ringo");
//关联数组
var lennon = array();
lennon["name"] ="Jhon";
lennon["year"] = 1940;
lennon["living"] = false;
/*var lennon = array("Jhon", 1940, false);
beatles[0] = name[3] */

beatles[0] = ("Jhon");

alert (height);

//操作
//year++
var message = "I am feeling" + "happy";

//if increment
if (!(1>2) || 2<= 3 ) {
alert("The world has gone mad!);
} else {
alert("All is well with the world");
}

//loop increment
var count =1;
while (count <11) {
alert (count);
count++;
}

do {
alert (count);
count++;
} while (count <11);

//for
for (var count =1; count <11; count++) {
alert(count);
}

}

//Function
function shout() {
var beatles = array("John", "Paul", "George", "Ringo");
for (var count =0; count <beatles.length; count++){
alert(beatles[count]);
}
}

//Object
//Object.porperty
//Object.method()
//new an instance
var jeremy = new Person;
jeremy.age;
jeremy.mood;

//native object 内建对象
var beatles = new Array();
beatles.length; //array's length
var num = 7.516;
var num = Math.round(num);
alert(num);
var current_date = new Date; //gerDay(), getHours(), getMonth()
var today = current_date.getDay();

//host object宿主对象,例如浏览器提供的预定义对象
//主要包括Form, Image, Element

‘============================================

第3章 DOM 本章内容
● 节点的概念
●四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute和setAttribute

的对象可以分为三种类型：
●用户定义对象（user-defined object）：由程序员自行创建的对象。本书不讨论这种对象。
●内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。
●宿主对象（host object）：由浏览器提供的对象。

3.3.1 节点
1. 元素节点: DOM的原子是元素节点（element node）。
2．文本节点: 元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大多数内容都是由文本提供的。
文本节点总是被包含在元素节点的内部
3．属性节点: 还存在着其他一些节点类型。例如，注释就是另外一种节点类型。但我们这里还想向大家再多介绍一种节点类型。
元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述
并非所有的元素都包含着属性，但所有的属性都会被包含在元素里。

4．CSS：层叠样式表
利用CSS对某个元素的样式做出声明的语法与JavaScript函数的定义语法很相似：
selection{
property: value;}
在样式声明里，我们可以对浏览器在显示各有关元素时使用的颜色、字体和字号做出定义，如下所示：

继承（inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。

为了把某一个或某几个元素与其他元素区别开来，我们需要使用class属性或id属性之一。
l class属性所有的元素都有class属性，不同的元素可以有同样的class属性值。
l id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符，
每个元素只能有一个id属性值，不同的元素必须有不同的id属性值。

’========================例子=========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

getElementById()方法：注意大小写，javascript认！返回一个对象

document.getElementByID(id)

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<style type = "text/css">

p{
  color: yellow;
  font-family: "arial", sans-seryf;
  font-size: 1.2em;
}


body{
  color:white;
  background-color: black;
}


.special {
  font-style: italic;
}
h2.special{
  text-transform: uppercase;
}


#purchase{
  border: 1px solid white;
  background-color: #333;
  color: #ccc;
  padding:1em;
}
#purchase li{
  font-weight: bold;
}
</style>
<head>
  <meta http-quiiv="content-type" content="text/html";
  charset=utf-8" />
  <title> Shopping list</title>
</head>
<body> 
  <h1>What to buy</h1> 
  <p class="special"> This parapraph has the special class</p>
  <h2 class="special">So does the headline</h2>
  
  <p title="a gentle reminder">Don't forget to buy this stuff.</p>
  <ul id="purchase">
   <li>A tin of beans</li>
   <li>Cheese</li>
   <li>Milk</li>
  </ul>
  
  
  <script type="text/javascript">
   alert(typeof document.getElementById("purchase")); //return Object
   alert(document.getElementsByTagName("li").length); // 3
   //验证 getElementsByTagName
   for (var i = 0; i < document.getElementsByTagName("li").length; i++){
    //连接符是 +
    alert("The type of tag li is: " + typeof document.getElementsByTagName("li")[i]);//alert(typeof document.getElementByTagName("*"));
   }

   //查询<p>元素的属性
   var paras = document.getElementsByTagName("p");
   for (var i =0; i < paras.length; i++){
    var title_text = paras[i].getAttribute("title")
    if (title_text != null) {
     alert("The attribute is:" + title_text);
    }
   }

   //setAttribute
   var shopping = document.getElementById("purchase");
   alert(shopping.getAttribute("title"));
   shopping.setAttribute("title", "a list of goods");
   alert(shopping.getAttribute("title"));
  </script>
</body>
</html>