• 《JavaScript DOM 编程艺术》(第二版)读书笔记(二)


    接下来正式进入DOM的学习

    第三章 DOM

    D代表document(文档),O代表object(对象),M代表model(模型),简单的说DOM把一份文档表示成一颗“树”(数学上的概念).

    节点(node),它表示一个网络的连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况,文档是由节点构成的集合.

    1.元素节点(element node)

    <html>、<head>、<body>、<p>、<ul>等标签的名字就是元素的名字,比如文本段落元素名字是“p”

    2.文本节点(text node) 一般文本节点包含在元素节点里面

    3.属性节点(attribute node) 属性节点也包含在元素节点里,比如最常见的class,id

    每个节点都是一个对象

    获取元素的方法

    1.document.getElementById

    2.document.getElementsByTagName

    3.document.getElementsByClassName

    第一种方法比较简单,第二种方法需要注意的是得到的结果是一个数组,第三个方法比较新,旧的浏览器版本没有支持,但可以用原有的方法实现,代码如下

    function getElementsByClassName(node,classname){
            if(node.getElementsByClassName){                               //如果浏览器支持原生的方法,则直接用原生的方法
            return node.getElementsByClassName(classname);
            }else{
            var results = new Array();
            var elems = node.getElementsByTagName("*");
            for(var i = 0; i < elems.length; i++){
                if(elems[i].className.indexOf(classname)!=-1){                
                    results[results.length]=elems[i];
                }
            }
            return results;
    
    }

    tips:indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。没有则为-1。

    获取和设置属性(两者只能作用于元素节点)

    1.getAttribute 使用方法:object.getAttribute(attribute)

    2.setAttribute 使用方法:object.setAttribute(attribute,value)

     

    第四章 案例研究:javascript图片库

    1.setAttribute可以用其他方法代替,直接设置:element.value = "the new value",相当于element.setAttribute("value","the new value")

    2.childNodes 属性

    在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组.

    由childNodes属性返回元素所有类型的节点,不仅仅是元素节点。几乎每一种东西都会成为一个节点,甚至空格和换行都会被解释为节点。

    3.nodetype属性

    可以用node.nodeType获取节点的nodeType属性

    元素节点的nodetype属性值是1,属性节点的nodetype属性值是2,文本节点的nodetype属性值是3,注释节点的nodetype属性值是8,文档节点的nodetype属性值是9

    4.nodevalue属性

    如果想改变一个文本节点的值,用nodeValue属性,方法node.nodeValue

    5.firstChildlastChild属性

    分别对应childNodes[0]和childNodes[childNodes.length-1]

    第5章 最佳实践

    主要讲了写JS代码的几个需要重点注意的东西:

    平稳退化、渐进增强、向后兼容、提高性能。

    仔细阅读,在平常做项目时运用。

  • 相关阅读:
    图解zookeeper FastLeader选举算法【转】
    win10 tensorflow python3*,Multiprocessing using fit_generator(pickle_safe=True) fail问题解决
    xcode从8升级到9出现的问题
    c++保存数据到TXT
    基于机器学习人脸识别face recognition具体的算法和原理
    pycharm 操作的一些设置,记录下
    ML-DL-各种资源汇总
    MATLAB实现多元线性回归预测
    【机器学习】 Matlab 2015a 自带机器学习算法汇总
    C++中嵌入python程序——命令行模式
  • 原文地址:https://www.cnblogs.com/cz-parallel-space/p/4288292.html
Copyright © 2020-2023  润新知