JavaScript DOM编程艺术-学习笔记（第三章第四章）

Posted 2020-08-23

第三章：

   1.js的对象分为三种：①用户自定义对象 ② 内建对象（js提供的对象） ③宿主对象（js寄宿的环境-浏览器，提供的对象）

   2.文档是由节点组成的集合，即dom树，html元素是根元素，是唯一一个没有被其它元素包含的元素。

   3.元素节点并非直接包含文本节点，例如：<ul><li>你好</li><ul>    ul元素并没有直接包含文本元素

  4.获取元素的方法：

   ①getElementById()

  ②getElementsByTagName ()  独特的用法：docuemnt.getElementsByTagName("*")     用于获取某个元素内的所有标签的数量。类似于jquery的size()

  题外话：换行的时候，总想ctrl+s  。哎，已经成为习惯了吗。

  ③getElementsByClassName()  （ie8以及以下版本不支持）

 书中给出了一个自定义的getElementByClassName方法：

 1             function getElementsByClassName(node,classname){
 2                 if(node.getElementsByClassName){
 3                     return node.getElementsByClassName(classname);
 4                 }else{
 5                     var ele = node.getElementsByTagName("*");
 6                     var arr = [];
 7                     for (var i = 0; i < ele.length; i++) {
 8                         if(ele[i].className == classname){
 9                             arr.push(ele[i]);
10                         }
11                     }
12 
13                     return arr;
14                 }
15             }

5.小知识点：① 元素.className()   获取元素的名称  ②if(sm != null)  等同于if(sm)  

6.在本章最后的部分，有说到，setAttribute修改的值，不会出现在源码中。可是自己的代码并没有那种效果。还有对于这种现象的解析，让我觉得说的是ajax。。。。。。。？？？

 

第四章：

 1.本章介绍 了一个例子：类似于切换头像的效果，也可以说是已一个简单的选项卡效果：

2.胡思乱想：① 0级dom-原始dom  ②1级dom - 标准dom  ③2,3级dom-标准化基础上的交互式dom

3.小知识点： on-click="return false;"  等同于 ： 按钮没有被点击

4.节点属性：

   ①childNodes 获取某元素的所有子节点(包含元素节点，属性节点，文本节点)

  ②nodeType(1-元素节点 ， 2- 属性节点，3-文本节点)

  ③nodeValue  无法直接获取元素的文本。 元素的文本 = 元素的第一个子节点的nodeValue值（p.childNodes[0].nodeValue）   类似于jquery的text()方法

5.setAttribute  相当于 jquery中的css（）和attr()方法。两者的区别是:attr（）方法可以获取和修改html标签中的任意属性。而css()只能获取和修改 属性style的值