JS学习笔记(上)

dom操作

1.dom：(document object model)，简单理解:就是网页元素，dom操作就是对网页中元素的操作

2.JS基本语法

声明变量 var a;  //js没有变量类型，所以任何类型的声明都如左所示，无论是基本类型、数组、对象，声明方式都是如此

声明方法 function modifyDiv(){ 

　　　　　}   　　//js方法声明如左，无疑，与其他编程语言相比，少了返回值和修饰符

带参方法 function modifyDiv(divObject,4,true){

　　　　　}　　　　//因为js中变量没有类型，或者说只有一种 var，所以在js方法参数中，只有参数名，而没有参数类型，无论传进来的是基本类型还是数组、对象
 

3.简单的方法

获取某个元素标记
  var a=document.getElementById("div1");  //getElementById()方法只能被document使用，返回一个对象
获取多个元素标记
var b=document.getElementsByTagName("div");//该方法可以被document和其他任元素对象使用，返回的是一个对象数组

　　　　　　　　  var c=a.getElementsByTagName("div");
 
4.js中的for循环

 for(var i=0;i<p.length;i++){
  var oneDiv=c[i];
}
 

5.dom操作的理解：1.将HTML标记对象化，也可以说是将HTML中的元素标记都看成一个个的对象

　　　　　　      2.HTML元素标记的属性看做对象的属性

如下图：

HTML元素标记———>对象

HTML元素属性———>对象的属性
 
 

function modifyElement(){

var p1=document.getElementById("firstP"); //获取单个元素

var p2=p.getElementByTagName("p");//获取多个元素，返回一个数组

var p=p2[0];

p.innerHTML="new text";  //填充<p></p>标记元素之间的内容

p.style.color="red";   //修改p元素的属性对象的属性为red

p.style.backgorundColor="grey";//css中background-color 和js中backgrounColor的书写差别

p.className="p1"; //html中各元素标记的class属性，在js中书写为className

}
 

注意：书写变化

CSS中  background-color———>JS中  backgroundColor ,去“-”第二个单词首字母改大写

HTML中  class ———> JS中className