zoukankan      html  css  js  c++  java
  • 【2017-4-3】操作属性 定时器 操作内容 操作相关元素

    一、操作属性

    1.对象.setAttribute('属性名','属性值');     -- 添加属性

      例子:把所有class为div的,字体改为30px;

          var a document.getElementsByClass('div');

          for(var i=o;i<a.length;i++){

            a[i].setAttribute('style','font-size=30px');或者用a[i].style.fontSize='30px';

          }

    2.对象.getAttribute('属性名');         -- 获取属性值,如无此属性,那么返回null

    3.对象.removeAttribute('属性名');         -- 移除属性

      例子:设置2个按钮,第一个不能点击,点击第二个,是第一个可被点击

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <input type="button" value="第一个按钮" disabled="disabled" id="but1"/>
        <input type="button" value="第二个按钮"  id="but2"/>
    </body>
    </html>
    <script type="text/javascript">
        document.getElementById('but2').onclick = function () {
            var a = document.getElementById('but1');
            a.removeAttribute('disabled');
        }
    
    </script>

    二、定时器

    1.window.setTimeout(function(){},间隔时间毫秒);

      定时触发,延迟执行,只能执行一次

    2.window.setInterval(function(){},间隔时间毫秒);

      无限循环,每次都有间隔时间,一般大于20毫秒,有返回值,可以用变量来接受这个定时器的对象

    3.window.clearInterval(要关闭的定时器对象,要关闭的对象需要接收);

    三、操作元素

    1.对象.innerHTML = '值';  

      赋值:标记会被编译执行 

      取值:标记会取出     var s = 普通元素.innerHTML; 

    2.对象.innerText = '值';

      赋值:内容直接全部输入

      取值:只取文字内容   var s = 普通元素.innerText; 

    3.注意:表单元素 ---  只能用value来取值赋值

      表单元素.value = '值';

      var a = 表单元素.value;

    四、操作相关元素

    1.找到同辈的相关元素

      a.nextSibling --- 找到a的下一个(位置)同辈元素

      a.previousSibling --- 找到a的上一个(位置)同辈元素

      注意:如果有回车空格也算,需要继续加(nextSibling或者previousSibling)

    2.父辈元素

      a.parentNode --- 找到a的上一级(包含a的元素)父辈元素 

    3.子元素

      a.childNodes --- 找出的是数组,

      a.firstChild  --- 找出的是第一个子元素

      a.lastChild --- 找出的是最后一个子元素

      a.childNodes[n] --- 找第几个,

        alert(nodes[i] instanceof Text);判断是不是文本,是返回true,不是返回flase,用if判断,如果是flase,可以去除空格 

    五、元素的创建、添加、删除

    1. var a = document.createElement('标记名'); - 动态创建元素,并赋值给a;

      a.appendChild(a); --- 像a标签中添加一个子元素

      a.removechild(对象); --- 删除一个子元素 

  • 相关阅读:
    《如何快速阅读一本书》读书笔记总结(实测,对提升阅读速度和质量非常有用)---2020年的第8/100本 (一目十行读书训练法)
    穷查理宝典 读书笔记--2020年的第1/100本
    200个查理芒格思维模型---多元思维模型
    lintcode算法周竞赛
    2016 Google code jam 大赛
    程序员面试心得总结
    (lintcode全部题目解答之)(附容易犯的错误)
    模板
    《非连续性》 混沌大学商学院第3章 读书笔记总结--2020年的第19/100本
    《第二曲线》 混沌大学商学院第2章 读书笔记总结--2020年的第18/100本
  • 原文地址:https://www.cnblogs.com/hanqi0216/p/6665044.html
Copyright © 2011-2022 走看看