7月25日--JavaScript基础

1.关闭窗口(window.close)

window.close();或《窗口对象》.close();关闭指定窗口

例：

var mywin=window.open('http//:www.imooc.com');

mywin.close();

 

2.认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中html、body、p等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如li.../li中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。

3.通过ID获取元素

网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

<script type="text/javascript">
    var mye=document.getElementById("con")
    document.write(mye);
</script>
<p id="con">i love javascript</p>

输出的结果为空或[object HTMLParagraphElement]

因为获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

 

4.innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容。

语法：Object.innerHTML

注意：

1.Object是获取元素对象，如通过document.getElementByIdx_x_x("ID")获取元素

2.注意书写，innerHTML区分大小写

结果：New text！

p标签原始内容：Hello World！
p标签修改后内容：New text！

 

5.改变HTML样式

语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementByIdx_x_x("id")获取的元素。

看看下面的代码:
改变 p 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
    var mychar = document.getElementById("pcon");
    mychar.style.color = "red";
    mychar.style.fontSize = "20";
    mychar.style.backgroundColor = "blue";
</script>

显示和隐藏(display属性)

 

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementByIdx_x("id")获取的元素。
value取值:
none     此元素不会被显示（即隐藏）
block    此元素将显示为块级元素（即显示）

<script>
    function hidetext() {
        var mychar = document.getElementById("con");
        mychar.style.display = "none";
    }
    function showtext() {
        var mychar = document.getElementById("con");
        mychar.style.display = "block";
    }
</script>
<input type="button" οnclick="hidetext()" value="隐藏内容" />
<input type="button" οnclick="showtext()" value="显示内容" />

其中段落的class叫con，当点击隐藏内容是段落内容隐藏，点击显示后再次显示

 

控制类名（className属性）

className属性设置或返回元素的class属性。

语法：

Object.className=newclassname;
作用：

1，获取元素的class属性

2，为网页的某个元素指定一个css样式来更改该元素的外观

<script>
    function add() {
        var p1 = document.getElementById("p1");
        p1.className = "one";
    }
</script>