zoukankan      html  css  js  c++  java
  • js基础八

    10个div点击一个div变绿色,其他都为红色,立即执行函数包裹代码防止全局变量产生
    选取对象集合
    如何实现,给每个div添加事件,循环这个对象集合
    (在点击的这个div的时候做判断,判断当前的这个div是否是红色,如果是红色就变为绿色,
    把所有div变成绿色,再把当前点击的这个div变成红色(所有div的点颜色赋值为绿色,点击的style的背景颜色赋值为红色)
    再点击红色的时候把红色再次变为绿色,把当前div变成绿色
    方法二:添加类名的方式


    操作元素内容:
    innerHTML 设置或获取标签当中的内容( 识别HTML )设置或转换成字符串,保存到innerHTML中去 赋值的话会修改标签中的内容:div.innerHTML = 'hello,world'按照标签的写法写的话就会是一个标准的标签
    innerContent(ie浏览器中中无法使用,ie中没有这个属性)常规浏览器获取纯文本
    innerText ie浏览器中使用这个,获取纯文本

    以下判断是否是ie浏览器
    if(div.textContent !== undefined){
    var text = div.textContent;
    }else{
    var text = div.innerText;
    }

    alert(text)


    【不能再判断中使用函数】


    css层叠样式表

    document.styleSheets回样式表的集合
    document.styleSheets[index].rules 返回样式表中选择器的集合
    document.styleSheets[index].rules[index].style.attr查找样式表中的样式属性(ie chrom


    元素最终的样式

    来获取当前对象的最终样式:window.getComputedStyle(object,null).attr ( W3C )
    获取当前对象的尺寸:clientWidth/clientHeight: 元素可视部分的高度和宽度(width + padding) ,也就是包含了padding,不包含border、margin
    offsetWidth/offsetHeight: 元素实际的高度和宽度(width+padding+border),也就是包含border和padding


    DOM(稳当对象模型 标签里面的文本也会看成一个节点


    节点的关系,类似家族有父节点和子节点,但是子节点不一定会有,比如文本就不会有子节点
    如何获取节点对象:


    通过元素获取节点的四种方式:
    document.getElementById("elementID");获取标签元素节点
    document.getElementsByTagName("tagname");标签名的对象的集合
    document.getElementsByName("name");名称的对象的集合
    document.getElementsByClassName("classname");类名的元素集合

    元素节点是可以直接获取的
    somNode.parentNode任何节点的父节点都可以是这个表示,当前节点的父节点
    childNode 子节点 包含所有节点,文本节点也包含在内的,比如空格为txt节点
    children 只包含标签节点,不包含text节点
    firstchild 当前元素的所有子节点中的第一个子节点 打印第一个子节点firstchild[],括号里写角标
    获取最后一个子节点 lastChild
    nextSibling获取兄弟节点 换行符

    操作节点: 以下四个方法属于父元素的方法,都是剪切过去的
    appendChild添加子元素

    appendChild把标签插入到另一个标签的子元素的末尾
    var div = document.getElementById("div");
    var p = document.getElementById("p");
    div.appendChild(p)

    insertbefore(childNode,nextNode)——要插入的节点,参照的节点,同一个节点只能在dom树中出现一次,之前位置就没有了 如果第二个参数为null的话,默认添加到末尾(剪切操作


    replaceChild(p,select);替换节点(剪切操作
    removeChild移除节点


    $0
    sources 断点调试

    cloneNode(isDeepcopy) 属于复制的方法 isDeepcopy:深度复制,当isDeepcopy的值是true则是一个深度复制,当isDeepcopy的值是fluse则是一个浅度复制
    deeplist.
    document.createElement(tagName)通过标签名创建一个元素节点。接受一个字符串参数,这个字符串即为标签名字


  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/duanfuying/p/6033220.html
Copyright © 2011-2022 走看看