js学习

• 这七种节点都属于浏览器原生提供的节点对象的派生对象(?)

• 所有节点对象都是浏览器内置的Node对象的实例，继承了Node属性和方法

• nodeName属性返回节点(标签)的名称

• 哪个属性记录了标签的ID\类？
• why
• getElementById\TagName\Class都是node对象的方法

• 所有节点对象都是node对象的实例，都集成了node对象的属性和方法

• node.ownerDocument : 当前节点所在的顶层文档对象(一般是document)

• node.nextSibling : 紧跟在当前节点后面的第一个同级节点（第一个兄弟节点）

• node.previousSibling:当前节点前面的、距离最近的一个同级节点
  -node.parentNode:当前节点的父节点

• why

• 我对document.getElementById等实现方法很好奇
  -了解到document包括各种标签在内都是node对象的实例，也就是说是一个实例之后，其中有一个键值对”id”：”“,是储存id的，一切就都能得到解释了

• 我们用了这个方法之后，得到一个对象，对象中含有很多键值对

• 如何获取每个

  元素的title属性

• 提示：使用getElementByTagName方法和getAttribute方法
  //获取所有标签为p的对象
  var p_array = document.getElementByTagName(“p”)
  //获取所有p标签的title属性
  语句2：var p_array_title = p_array.getAttribute(“title”)
  或者可以用这种注释方式：
  //获取所有标签为p的对象，并将其引用值保存为一个数组
  //获取所有p标签的title属性，并将其引用值保存为一个数组
  上面我写的语句2是错误的，getAttribute不适用于一个数组（虽然这个数组也是一个对象）
  还是要清除返回的的类型是什么（不像是数值或者单纯的类型，目前自己还没有能力记忆这些对象所有的属性）
  //返回一个数组，数组中的的键值有0：第一个P标签对象；length:对象的个数
  p标签对象有一个键值对：title:值，返回键值对对应的值，返回一个数组
  遍历，遍历并赋予
  这个概念还是有一点不懂
  一一对应
  计数器
  i=1;
  取出数组A的第i个元素
  放入数组B的第i个位置
  i++
  实际上，我是没有弄清楚
  A[]=B[]
  是否能实现
  应该是可以的因为A是引用B而已
  有问题的不是这里
  而是对B直接使用getAttribute，应该会报错，因为B数组并不继承NODE的方法
  之前说NODE简单，这下子不简单了吧
  使用了某个方法后，得出的新的数据会继承原来的？
  直接使用的话会出现getAttribute并不是B数组的方法
  这里就有个问题了，JS引擎怎么知道某个数据是否具有某些方法？
  上面的步骤也是有问题的：
  1.获取所有的P标签，得到一个数组
  2.引用出数组的第一个索引值指向的对象
  3.使用其方法getAttribute方法，方法的参数为”title”
  4.找到p标签中键值为”title”的值
  5.引用该值
  6.打印该值

当我们学习某个方法的时候：
1.改方法作用的对象是什么？
2.改方法得出的结果是什么？
3.该方法传递的参数是什么？
4.我们用他来达到什么目的？
5.似乎能获取一个的也可以获取全部，只需要作遍历就可以了

和MySQL一样，其实思路上面也是查，改，增，删
1.需求：把表格的标题改成title
2.程序员思路：
1.找到该表格：用tag/classname/id
2.更改该表格的标题：
3.更具体的实现：
1.使用getElementsByTagName方法获取到一个数组，数组中含有该对象引用或者使用getElementById方法获取到具体的对象
2.找出该对象的引用
3.该对象中含有title的key，找到key对应的值
3.使用setAttribute方法，参数输入key，和要修改的值
4.更具体的实现：
1.要考虑可读性，使用变量的方式

为什么不使用
a.title来直接查看，而要使用getAttribute来查看？两者有什么区别？
同理，通过setAttribute来修改和直接对a.title赋值有什么区别？

如何理解对页面进行刷新而不需要在浏览器里刷新页面？

第四章

• 需求：
• 仅仅靠文字的话是否能达成全部的功能，是否更容易达成？
• 除了文字之外还有其他理清思路的方式吗？
• 很难做到只是说出，甚至只是用文字表达出一个需求，然后就能够实现，至少对目前阶段的我来说还是有些困难

• 还是回到那句话：我要怎么样使用这本书.

• 为图片创建一个链接清单

• 更具体一些：使用ul元素列出超链接
• 单单凭借上面这两句话我只能做到下面这些：
• 
• 对比一下改良后作者的代码：
• 
• 有时候难免会想，这些准备工作有什么意义？
• 需求1：点击某个链接时，留在这个网页而不是转到另外一个窗口；
• 作者的行文思路是：先给出需求，再给出解决方案，这时候我们是否能尝试自己先去解决？
• 这个可以通过设置a标签的某个属性来实现（明显我是记得的，但是具体细节却记不太清楚）
• 怎么解决w3c-参考书-a标签-属性-target-_self
• 尝试自己码一下,是可以实现的
• 需求2：点击某个链接时，同时看到图片及原有的图片清单
• 毫无思路
• 作者思路：在主页预留浏览区；点击链接时拦截网页的默认行为；点击链接时替换图片；
• 尝试自己操作一下
• 预留浏览区容易实现，插入随便一张图片即可
• 拦截没有思路
• 替换可以使用事件,但是已经忘记怎么使用事件了
• 因为我没有考虑到下面的，所有我没有给占位图设置ID
• 替换图片的具体实现思路：
• 需要改变src属性，使用setAttribute方法
• 再次自己思考一下
• 获取到图片的scr;通过setAttribute把该src传递给占位图的src；具体实现伪代码如下：
• 
• 莫名其妙就写到要写一个函数，我自己都没有这种想法
• 当作者的思路和我们差异较大的时候，其实自己还是有点气馁的，就像一道大题连思路都做错了一样。
• 直到function showPic(whichpic)为止，我都不知道作者要做什么
• 使用getAttribute获取到点击图片的href值
• 把这个值存入source
• 使用getElementById获取占位图片
• 把这个值存入placeholder
• placeholder.setAttribute(“src” source)
• 除了函数之外，思路和我们基本是一致的
• 什么是第一级DOM？
• 我之前说过的就验证了：其实可以直接改变src的属性：placeholder.src = source 等价于placeholder.setAttribute(“src” source)
• 是否存在不能直接赋值的方法修改的标签属性？
• 第一级DOM实际就是一种规范
• 莫名其妙就JS函数就写完了，莫名其妙就要应用了
• 单独把我们写的JS函数存成一个文件
• 通过引用之后code_gallery.html文档就可以使用该函数了，但是怎么调用这个函数？
• 需要给超链接添加行为——事件处理函数
• 这个是个新概念
• 事件处理函数的作用：特定事件发生时调用特定JS代码
• 思路就很清晰了；写html-写js函数处理html元素-写事件处理函数调用js函数
• onclick事件——用户点击时触发
• this关键字——有点天降神兵的意味在里面
• 莫名其妙的showPic(this)
• 莫名其妙的event = "javasript statement(s)"
• 如果不禁止默认行为，链接点击时，showPic函数和默认行为都会被调用
• 事件处理函数的工作机制(意想不到的讲解)
• 事件发生-JS代码执行-JS代码可以返回一个值，传递到事件处理函数
• 试验代码：<a href="http://www.baidu.com" onclick="return false">click me</a>
• 点击代码不会发生任何事情；
• onclick也是html的一个属性？还是属于js范畴内的？
• 为什么不会发生任何事？
• 前面修正成：事件发生-JS代码执行-JS代码可以返回一个值，传递到事件处理函数-该值为布尔值，false则执行，ture则不执行（默认行为）？
• 我只记住了onclick = “return false”,是不执行默认行为，和是否执行其他的JS代码没有什么关系
• 出现BUG的时候怎么测试？
• 线索太少，没有明显提示怎么改BUG
• 出现一些低级的拼写错误BUG真的是很令人心烦，怎么一步一步排查？
• 需求1：在一个网页上显示不同的文本
• 这里的苦难在于我不理解需求是什么意思，继续看的时候他已经给出思路了
• 思路：提取出图片的title值，把他插入到文本中去
• 自己试试：
• 一试就发现其实自己还是不是很理解上面的做法：
• 点击-触发函数-this即点击的对象传入函数-获取到传入对象的src值-获取占位图片-修改占位图片的src值
• 实际上我们根本不适用document.getElementById来获取我们点击的标签，通过事件就可以获取了
• 伪代码如下：
• 
• 新的DOM（对象的）属性：childNodes：获取任何一个元素的所有子元素，是一个数组element.childNodes
• onload事件：让事件发生函数触发的JS函数在页面加载时调用，尝试一下不加的话会默认浏览器也会自己调用?
• 并不会自动调用，需要加上window.load = 函数（括号没有也么有关系）
• 子元素数字对不上:h1+ul+li*4+img+p应该有8个，但是显示只有7个，错了，是子元素，不包括li的，即便如此也不对，因为文档树的节点类型不止元素节点一种，空格\换行也会被解释成节点
• 可以使用遍历来看一下，每一个节点的类型就知道了，就是下面要学的nodeType
• nodeType属性:该值并不是一个字符串，而是一个数字，一共有12种可选值，其中只有三种是有用的：元素节点：1；属性节点：2；文本节点：3
• 有了这些，足够我完成扩展的功能吗？
• 很显而易见了，我们获取到P标签，然后获取到P标签的文本节点：P.childNodes[0],然后对其进行修改即可
• 还是有点问题获取的文本节点是一个对象，其保存的内容是他的一个属性值
• 果然，新增了一个属性nodeValue
• childNodes[0]有个同义属性：firstChild
• 同理：number = childNodes.length,child[number-1]也等同于：lastChild
• 为什么要做这种”多余”的事？ 更加简明
• 回顾一下学习新的属性的顺序：childNodes-nodeType-nodeValue-firstChild-lastChild