Javascript 组成：ECMAscript、Dom、Bom

时间 2019-12-09

标签 javascript 组成 ecmascript dom bom 栏目 JavaScript 繁體版

原文原文链接

1、核心（ECMAScript）css

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

2、浏览器对象模型（BOM)——对应window对象数组

window：窗口浏览器

window.open("打开的地址","打开的位置")
window.opener:打开此页面的上一个页面对象
window.close():关闭当前页面

location：地址栏dom

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

history：历史记录 spa

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

document：文档code

注：window可省略orm

3、文档对象模型（DOM）htm

dom: document object model 文档对象模型对象

定时器：

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

基本格式：

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

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

二、间隔执行（执行屡次）

基本格式：

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

清除定时器；

clearTimeout（setTimeout对象）

clearInterval（setInterval对象）

例：

function dianji(){
    setInterval(function(){
        console.log(9);
    },1000);
}

三、DOM操做

1、找到元素：

   docunment.getElementById("id")；//根据id找，最多找一个；
    var a =docunment.getElementById("id");//将找到的元素放在变量中；
    docunment.getElementsByName("name")；//根据name找，找出来的是数组；
    docunment.getElementsByTagName("name")；//根据标签名找，找出来的是数组；
    docunment.getElementsByClassName("name")// 根据classname找，找出来的是数组；

2、操做内容：

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 则不会进行提交，利用这个能够对提交跳转进行控制。

3、操做属性

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

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

而后能够对该元素的属性进行操做：

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

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

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

4、操做样式

首先利用元素的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，中恒线去掉，后边首字母大写。