在《JavaScript DOM编程艺术》的一些笔记

最新推荐文章于 2023-03-28 17:08:18 发布

你的宇哥哥

最新推荐文章于 2023-03-28 17:08:18 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/ak47bo88/article/details/74887048

版权

第二章

（2.1）程序设计语言分为：
“解释型”（需要解释器，执行到有关代码才能发现错误）、
“编译型”（需要编译器，编译阶段就能发现错误）

（2.2.5）声明数组

    var arr = [ "John" , 12 , false ];//不介意类型

（2.2.6）声明对象

    var arr = {
        name : "John" ,
        year : 1940
    };

（2.6）函数
变量命名：下划线分隔
函数命名：驼峰命名法

（2.7）对象
【内建对象】：Array、Math、Date…——（内建在JS里的对象）
【宿主对象】：window（浏览器窗口本身）、document（浏览器窗口内的网页内容）——由浏览器提供的对象）
【用户定义对象】

第三章

“D”：document，浏览器窗口内的，文档对象
“O”：object，三种对象
“M”：model，一张城市街道图，代表着一个实际存在的城市
——“DOM”代表着加载到浏览器窗口的当前网页

（3.4）节点（node）
【元素节点】：<html>、<p>…（每个元素都是一个对象！）
【文本节点】：如果一份文档完全由一些空白元素构成，它将只有一个结构，没有内容
【属性节点】：用来对元素做出更具体的描述
这里写图片描述

（3.4.4）CSS
继承，是CSS的一项强大功能。
节点树上的各个元素将继承其父元素的样式属性

也就是给body设置CSS样式，它不仅作用于那些直接包含在<body> 标签里的内容，还将作用于嵌套在body元素内部的所有元素

（3.4.5）获取元素
3种方法：
1.getElementById（是宿主对象document特有的函数注意大小写）
- 返回一个元素对象

 document.getElementById("hsy");

2.getElementsByTagName
- 返回一个对象数组
- 可以通过 node.getElementsByTagName("*"); 获取内含的所有元素（嵌套多深的都算）个数

3.getElementsByClassName
- 返回一个对象数组，且与索引关键字的类名实际顺序无关，就算元素还带有更多类名也没关系，依旧被搜到
- 只有较新的浏览器支持，聪明的程序源想出了下面的方法：

            function getElementsByClassName(obj,className){
                if(obj.getElementsByClassName){
                    return obj.getElementsByClassName(className);
                } else {
                    var arr = [];
                    var nodeList = obj.getElementsByTagName("*");
                    for(var item = 0; item < nodeList.length; item++){
                        if(nodeList[item].className.indexOf(className) != -1){
                            arr.push(nodeList[item]);
                        }
                    }
                        return arr;
                }
            }

            var myBody = document.getElementById("bod");
            var result = getElementsByClassName(myBody,"div1");
            console.log(result);

（3.5）获取和设置属性
【获取属性】（getAttribute）
- 通过上面获取元素的方法后，我们就可以设法（getAttribute）获取它的各个属性啦！
- getAttribute不属于document对象，只能通过 元素节点对象 调用
- 若找不到，getAttribute会返回null，故可以用判断 if ( xx !=null )，等价于 if ( xx )

补充：

for...in，由于历史遗留问题，
    var paras = document.getElementsByTagName("p");
    for(var item in paras){
        alert(item);//会弹出paras对象数组的各个 属性名称 ，注意！是名称
                    //对于数组来说，也就是他们的下标0/1/2…
    }

for...of，会枚举对象数组的各个对象，注意，是一整个对象！

【设置属性】（setAttribute）
- 注意：
- DOM的工作模式：①先加载文档的静态内容；②（将静态内容画出来后）再动态刷新，动态刷新不影响文档的静态内容。
- DOM可以在对页面内容进行刷新，而不需要在浏览器里刷新页面。

###总结：
操纵“元素节点”，对象是document：
1、document.getElementById( );
2、document.getElementsByTagName( );
3、document.getElementsByClassName( );

操纵“属性节点”，对象是元素节点：
1、node.getAttribute( );
2、node.setAttribute( );