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

Posted 2020-09-07 张鑫4477

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