美文网首页
DOM(document object model)

DOM(document object model)

作者: Lichee_3be1 | 来源:发表于2018-04-24 11:21 被阅读0次

一开始涉及给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

相关文章

网友评论

      本文标题:DOM(document object model)

      本文链接:https://www.haomeiwen.com/subject/olahlftx.html