2016年11月2日--Window.document对象

一、找到元素:

docunment.getElementById("id");                      根据id找,最多找一个;

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

docunment.getElementsByName("name");          根据name找,找出来的是数组;

docunment.getElementsByTagName("name");     根据标签名找,找出来的是数组;

docunment.getElementsByClassName("name")     根据classname找,找出来的是数组;

二、操作内容:

1. 非表单元素:

1)获取内容:

alert(a.innerHTML);          标签里的html代码和文字都获取了,标签里面的所有内容。

alert(a.innerText);            只取里面的文字

alert(a.outerHTML);          包括标签本身的内容(简单了解)

2)设置内容:

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

a.innerText会将赋的东西原样呈现

清空内容:赋值个空字符串

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="http://www.baidu.com" onclick ="return false">转向百度</a> ;

加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。

三、操作属性

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

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

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

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

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

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

四、操作样式

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

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

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

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

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

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

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

上一篇:utils部分--一些通用的工具类封装


下一篇:css实现居中的各种方法