博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript DOM编程艺术-学习笔记(第三章、第四章)
阅读量:4341 次
发布时间:2019-06-07

本文共 1706 字,大约阅读时间需要 5 分钟。

第三章:

   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的值

转载于:https://www.cnblogs.com/zdsBlog/p/6188923.html

你可能感兴趣的文章
jquery扩展 $.fn
查看>>
Markdown指南
查看>>
influxDB的安装和简单使用
查看>>
JPA框架学习
查看>>
JPA、JTA、XA相关索引
查看>>
机器分配
查看>>
php opcode缓存
查看>>
springcloud之Feign、ribbon设置超时时间和重试机制的总结
查看>>
观看杨老师(杨旭)Asp.Net Core MVC入门教程记录
查看>>
UIDynamic(物理仿真)
查看>>
Windows下安装Redis
查看>>
winform非常实用的程序退出方法!!!!!(转自博客园)
查看>>
centos安装vim
查看>>
linux工作调度(计划任务)
查看>>
新部署到服务器 报 The requested URL /home/profession was not found on this server. 错误
查看>>
hadoop从非HA转到NAMENODE HA时需要注意的一个问题
查看>>
python-9-IO编程
查看>>
【GoLang】转载:我为什么放弃Go语言,哈哈
查看>>
【MySQL】MySQL 如何实现 唯一随机数ID
查看>>
【Redis】Redis分布式集群几点说道
查看>>