DOM(document object model)

一开始涉及给xhtml用的,所以很难用啊
DOM API 不需要会背,只需要用到的时候查 MDN 即可,前端面试也不会问你细节的。大概知道如何对 div 进行增删改查即可。

DOM 是一棵树(tree),树上有 Node

Node 分为 Document(html)、Element(元素)和 Text(文本),以及其他不重要的。

image.png

image.png
image.png

可能会问

nextsibling和previoussibling会获取文本结点
innertext和textcontent区别
nodetype1元素3文本
https://github.com/wojiaofengzhongzhuifeng/study/blob/master/blog/B8-DOM.md
https://xiedaimala.com/tasks/60d4d732-19f5-442b-9993-4d53ff94657c

一、


280.PNG

先写了个可以得到所有兄弟节点的函数
然后封装成下面的模样


281.PNG

为什么我们不用只有二个等号的==和!=,因为好复杂的规则,记不住啊
所以都用三个的,规则如下,创造的对象不等(指向具体不是一个),然后NaN不等于NaN
282.PNG

又写了一个函数


283.PNG

存在类似的代码,就有优化的可能,优化如下
这里 var methodName=classes[key]?'add':'remove'(都是字符串)
node.classList[methodName](key)(所以应该用xxx[]来取)
284.PNG

二、然后因为这个函数是本人写的,所以为了防止和别人写的冲突了,所以了解一下命名空间呀,给函数冠上我的名字
285命名空间.PNG

三、然后我懒得传入包括对某个标签调用函数还要传入这个标签作为参数,让它成为默认的this,于是对node标签直接添加一个公有属性,然后调用时候很方便,xxx.公有属性(),默认xxx节点就是第一个this参数。。。为了少写一个参数这么拼的吗
286this.PNG
287xianshithis.PNG

四、但是像三那样大家随便对公有属性(API)进行修改,那么就乱糟糟的了,所以这里很巧妙的把要运用到节点node上面的一些函数一起封装成个hash形式的函数,然后起了个变量名,要是要具体用到xxx这个node上面的时候,就一口气给这个xxx传到这个函数中,然后调用时候就默认第一个参数是xxx了,这种方法在一口气弄很多API的时候比较换算吧


2816.PNG

把这里的node2变量名改成jquery


288.PNG

五、当传入参数不止node这种,还有其他形式的比如选择器,可以根据这个来找到对于的node
289.PNG

然后对可以利用选择器得到多个某种属性的节点,对他们进行操作,注意这里的node对应的是id,我还纠结要有很多怎么办来着,傻乎乎,所以现在理解else if下面的啦~


2817.PNG

然后不想要NodeList的原型链,进一步如下,做一个临时变量temp即可,就指向object的了
2818.PNG

然后在加一些api啦,注意这里可能操作对象不止一个node啊
2811.PNG
2812.PNG

然后一般是给了参数,默认set设置一下;不给参数,是想获取text用get路径


2813.PNG

六、使用jquery,前面的东西是为了更好理解jquery,接下来使用它吧
一般引用方法


2815.PNG
2814.PNG

链式操作


2819.PNG
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • 第5章 函数和函数式编程 5.1 引言函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段。函数...
    VIVAFT阅读 943评论 0 5
  • 主要的几个大模块 1、block 一、 Block变量的声明格式为: 返回值类型(^Block名字)(参数列表);...
    lllaa阅读 95评论 0 0
  • 周末忘记整理这一周所看过和做过的事情了,补上 2016-3-19 ~2016-3-20 报名参加了web开发匠艺训...
    陈坚生阅读 314评论 1 0
  • 来源:微信公众号表妹的EXCEL 学习过表妹的快捷键课程的小伙伴,一定对“Alt + =”快捷键印象深刻吧?这个求...
    表妹的EXCEL阅读 806评论 0 7
  • 溪本来在学校读书时候大大咧咧,和我还是舍友。可是三十年没有见,听说依然是婚姻不顺利。具体原因谁也不细过问。但是...
    咫尺为邻阅读 109评论 0 0