码迷,mamicode.com
首页 > Web开发 > 详细

js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

时间:2017-03-31 21:27:50      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:att   div   node   dog   blog   create   doc   cti   ext   

JS对元素内容的操作:

1.操作样式(style)

2.操作属性(Attribute)

3.操作内容(innerHtml/Text)

 

 

一。操作元素属性

常见属性:class。id。style。disabled。

自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用。

this:代表所在最近的一个方法。

设置一个属性:a.setAttribute("属性名称","属性值");【不存在该属性名称时,创建这个属性,并赋值。当存在该属性名称时,对属性的值进行覆盖操作。】

获取属性的值:a.getAttribute("属性名称");【可以获取自定义属性的值】

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

二。操作元素内容

1.获取表单类元素的内容【[form表单]基本的12个表单类元素。详细:http://www.cnblogs.com/kissdodog/archive/2013/01/10/2854917.html】

取值方法:a.value="";

2.获取非表单类元素的内容【div/span等】  

取值方法:

(1)a.innerText="";  

添加内容时:【当该元素内部存在标记时,标记会被执行,但不显示标记】

a.innerHTML="aaa<br/>aaa"              

会执行标记<br/>产生换行,但不现实标记。

获取内容时:【当该元素内部存在标记时,标记和字符串内容一起显示】

<div id="a";><span>aaaa</span><div>

获取id为a的元素内容为:<span>aaa<span>

(2)a.innerHTML="";

添加内容:【只获取元素内部的文本内容,会显示标记,但不会执行】

 a.innerHTML="aaa<br/>aaa"   

添加后显示:aaa<br/>aaa   

获取内容:【只显示字符串内容,不会显示标记】

<div id="a";><span>aaaa</span><div>

获取id为a的元素内容为:aaa

3.常见应用

(1)创建一个<div class="h1"></div>

【1】a.innerHTML("<div class="h1"></div>");

[该方法在使用时会产生覆盖效果,创建多个时使用‘+=’]

【2】var a=document.createElement("div");

a.setAttribute("class","h1");

(2)自动换行:style="word-wrap:break;";

三。定时器

(1)只能执行一次的定时器

window.setTimeout(function(){},执行倒计时);【1000毫秒=1秒】

(2)不会被终止的定时器

window.setInterval(function(){},间隔时间毫秒);【1000毫秒=1秒】

终止方法:

var a=window.setInterval(function(){},间隔时间毫秒);

window.clearInterval(a);

 四。平级,子级,父级关系

【平级,子级的空格和换行算一个位置】

元素a的父级:a.parentNode

元素a的平级中上一个元素:a.previousSibling      再上一个a.previousSibling.previousSibling

元素a的平级中下一个元素:a.nextSibling             再下一个a.nextSibling.nextSibling  

元素a的子级:

第n个子级a.childNodes[n]

第一个子级a.firstChild

最后一个子级a.lastChild

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                                                                        

js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

标签:att   div   node   dog   blog   create   doc   cti   ext   

原文地址:http://www.cnblogs.com/zhangxin4477/p/6653553.html

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