zoukankan      html  css  js  c++  java
  • 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)自动换行: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

                                                                            

  • 相关阅读:
    Time Zone 【模拟时区转换】(HDU暑假2018多校第一场)
    HDU 1281 棋盘游戏 【二分图最大匹配】
    Codeforces Round #527 (Div. 3) F. Tree with Maximum Cost 【DFS换根 || 树形dp】
    Codeforces Round #527 (Div. 3) D2. Great Vova Wall (Version 2) 【思维】
    Codeforces Round #527 (Div. 3) D1. Great Vova Wall (Version 1) 【思维】
    Codeforces Round #528 (Div. 2, based on Technocup 2019 Elimination Round 4) C. Connect Three 【模拟】
    Avito Cool Challenge 2018 E. Missing Numbers 【枚举】
    Avito Cool Challenge 2018 C. Colorful Bricks 【排列组合】
    005 如何分析问题框架
    004 如何定义和澄清问题
  • 原文地址:https://www.cnblogs.com/zhangxin4477/p/6653553.html
Copyright © 2011-2022 走看看