首页 > 代码库 > 2017-3-31 js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。
2017-3-31 js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。
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)自动换行:;
三。定时器
(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
2017-3-31 js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。