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(){},时间);

清除定时器;

clearTimeoutsetTimeout对象)

clearIntervalsetInterval对象

 例:

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,中恒线去掉,后边首字母大写。

原文地址:https://www.cnblogs.com/dk2557/p/9199541.html