Javascript 组成：ECMAscript、Dom、Bom

一、核心（ECMAScript）

ECMAScript 定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。

二、浏览器对象模型（BOM)——对应window对象

window：窗口

window.open("打开的地址","打开的位置")

window.opener:打开此页面的上一个页面对象

window.close():关闭当前页面

location：地址栏

window.location.href="http://www.baidu.com";//修改页面地址，会跳转页面（超链接）

history：历史记录

window.history.back();//页面进行后退；

document：文档

注：window可省略

三、文档对象模型（DOM）

dom: document object model 文档对象模型

定时器：

1、延迟执行（只执行一次）

基本格式：

setTimeout（function（）{}，时间）;

时间用毫秒，1000毫秒=1秒

2、间隔执行（执行多次）

基本格式：

setInterval ( function(){},时间);

清除定时器；

clearTimeout（setTimeout对象）

clearInterval（setInterval对象）

例：

function dianji(){

    setInterval(function(){

        console.log(9);

    },1000);

}

3、DOM操作

一、找到元素：

   docunment.getElementById("id")；//根据id找，最多找一个；

    var a =docunment.getElementById("id");//将找到的元素放在变量中；

    docunment.getElementsByName("name")；//根据name找，找出来的是数组；

    docunment.getElementsByTagName("name")；//根据标签名找，找出来的是数组；

    docunment.getElementsByClassName("name")// 根据classname找，找出来的是数组；

二、操作内容：

1. 非表单元素：

1）获取内容：

a.innerHTML;//a为自定义元素，标签里的html代码和文字都获取了

直接用就是获取内容

加等号就是修改内容

例：

/*HTML内容*/

<body>

    <div id="me">

        <b>试试吧</b>

    </div>

</body>

/*js中的内容*/

<script>

 var a= document.getElementById("me");//用innerHTML获取div中的内容

    alert(a.innerHTML);

</script>

结果：

2）设置内容：

a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下，div中的内容被替换了：

2. 表单元素：

1）获取内容，有两种获取方式：

var t = document.f1.t1; //form表单ID为f1里面的ID为t1的input；

var t = document.getElementById("id"); //直接用ID获取。

alert(t.value);// 获取input中的value值；

 alert(t.innerHTML); //获取<textarea> 这里的值 </textarea>；

2）设置内容： t.value="内容改变"；

3. 一个小知识点：

<a href="www.baidu.com" onclick ="return flase">转向百度</a> ；加了return flase则不会跳转，默认是return true会跳转。按钮也一样，如果按钮中设置return flase 则不会进行提交，利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id");//根据id找元素

然后可以对该元素的属性进行操作：

a.setAttribute("属性名","属性值"); //设置一个属性，添加或更改都可以；

a.getAttribute("属性名")；//获取属性的值；

a.removeAttribute("属性名")；//移除一个属性。

四、操作样式

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id")；

然后可以对该元素的属性进行操作：

a.style.样式="" ； //操作此ID样式的属性。

样式为CSS中的样式，所有的样式都可以用代码进行操作。

document.body.stye.backgroundColor="颜色"；整个窗口的背景色。

操作样式的class：a.className="样式表中的classname" 操作一批样式

注意：

① dom操作css样式只能操作“行内样式”(css样式分为行内、内部、外部)

② 操作属性样式例如background-color/border-left-color，

需要变为backgroundColor、borderLeftColor，中恒线去掉，后边首字母大写。