码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2016-11-03 09:41:57      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:getattr   blog   element   world   document   html   attribute   pos   input   

一、找到元素:     

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" 操作一批样式

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

标签:getattr   blog   element   world   document   html   attribute   pos   input   

原文地址:http://www.cnblogs.com/hqxc/p/6025277.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!