zoukankan      html  css  js  c++  java
  • 第四天记录

    《JS操作》

    JS操作属性

    aaa.getAttribute("属性名"); - 取出aaa这个dom对象的属性名中的属性值

    aaa.removeAttribute("属性名"); -移除该属性

    aaa.setAttribute("属性名","值"); --添加/修改此属性

    window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,执行一遍
    window.setInterval(‘aaa()‘, 1000); --每隔1秒都执行aaa这个方法,循环执行

    clearInterval(time); --清除定时器

    window.clearInterval(延迟的id) --清除setTimeout

    操作样式

    变量名.style.样式名="";

    相关元素操作
    var a = document.getElementById("id"); 找到a;

    var b = a.nextSibling; 找到a的下一个同级元素,包含空格;

    var b = a.previousSibling; 找到a的上一个同级元素,包含空格;

    var b = a.parentNobe;找到a的父级元素;

    var b = a.childNobes;找到a的下一级子级元素,找到的是数组;

    var b = a.firstChild 第一个子元素,lastChild 最后一个元素,childNodes[n] 找第几个元素;

    操作样式

    元素.style.样式=""

    1 function getStyle(obj){
    2         obj.style.width = "200px";
    3         obj.style.backgroundColor = "green";
    4         var divobj = document.getElementById("fu").lastChild;         
    5         alert(divobj.getAttribute("name"));
    6     }     

    1.通过节点关系找元素
    2.注意换行在浏览器中被算作了text节点<br>

    同级节点:
    Node.previousSibling      // 返回前一个节点,如果没有则返回null
    Node.nextSibling        // 返回后一个节点

    父节点:
    Node.parentNode

    子节点:
    Node.childNodes         //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点,如果用这种方式获取节点列表,需要进行过滤
    Node.firstChild       //返回第一个子节点
    Node.lastChild        //返回最后一个子节点

    1 function add(obj){
    2         var div = document.createElement('div');
    3         div.innerHTML = "234";
    4         obj.appendChild(div);
    5     }
    1 <body>
    2 <div id="dd" style=" 100px; height: 100px; background-color: red;" onClick="getStyle(this)"></div>
    3 <div id="fu" name="父标签"><div name="子标签"></div><div name="子标签 同级标签"></div></div>
    4 </body>
  • 相关阅读:
    simian 查找项目中的重复代码
    idea 启动 ShardingProxy
    kafka 加密通信,python-kafka 访问加密服务器
    apt-get 修改源
    短轮询、长轮询、SSE 和 WebSocket
    前端模块化:CommonJS,AMD,CMD,ES6
    Set、Weak Set、Map、Weak Map学习笔记
    博客园应该如何运营
    Vue中Route的对象参数和常用props传参
    Dapper的新实践,Dapper.Contrib的使用与扩展
  • 原文地址:https://www.cnblogs.com/ty-v/p/7701048.html
Copyright © 2011-2022 走看看