美文网首页前端面试
5-3 DOM节点操作

5-3 DOM节点操作

作者: 留白_汉服vs插画 | 来源:发表于2017-11-06 15:05 被阅读10次



div1本质是一个js 对象。divList是个集合,也是一个对象。

定义和用法 sɪˈlektə(r)

querySelector(CSS 选择器) 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意:querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

CSS 选择器String必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。


p一个DOM节点,本质是一个DOM 对象。一个js可识别,可操作对象。js对象,才能js可识别,可操作。属性是可扩展。p是一个对象,style是它属性,又是一个对象。

p本质是一个对象,可以获取识别属性




property是js对象的一个属性。比如上面,x是obj的一个property,nodeName是p的一个property。attribute是标签里的属性,比如上面标签,li,有一个attribute class,img有很多attribute,比如data-original,class ,src和style。不是js属性,而是文档的标签中。

JS中的attribute和property的区别和联系

attribute和property到底是什么呢,有什么区别呢?这个或许很多人都没留意,或许认为是同一个东西。

要明确attribute和property是不同的东西就要先知道它们分别是什么,这个很难说得清,举些例子就明白了。

以div为例,它有以下属性:

ALIGN      align

CLASS      className

ID            id

TITLE      title

...            ...

其中第一列就是attribute,第二列就是property。

attribute是dom元素在文档中作为html标签拥有的属性;

property就是dom元素在js中作为对象拥有的属性。

所以:

对于html的标准属性来说,attribute和property是同步的,是会自动更新的,

但是对于自定义的属性来说,他们是不同步的,

先给出例子:


测试结果:

test

1 2 3 2

这个是自定义的属性;可以看出来attribute和property是不一样的;



需要记住的是:    attribute指的是html标签中的属性;

标准属性是同步的

property指的是js对象中的属性;

0

相关文章

  • 5-3 DOM节点操作

    div1本质是一个js 对象。divList是个集合,也是一个对象。 定义和用法 sɪˈlektə(r) quer...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • Dom操作

    操作节点 获取节点 获取子节点 更新DOM innerHTMLinnerTEXT 插入DOM appendChil...

  • 05-DOM相关知识点讲解

    DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...

  • JQuery---dom相关节点操作

    dom相关节点操作 /* DOM操作管理 属性...

  • 第十七章 DOM基础

    要点: DOM介绍 查找元素 DOM节点 节点操作 什么是 DOM? DOM即文档对象,针对HTML和XML文档的...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • DOM

    一.dom操作 dom的组成 元素节点属性节点文本节点 通过nodeType查看类型 1 元素节点 ,2 属性节...

  • DOM

    一、对象基础(补充) 二、DOM获取节点 三、间接获取节点 四、DOM节点的添加和删除 五、DOM属性操作 六、练...

  • DOM操作-节点操作

    创建节点 创建属性节点 插入节点 删除节点 remove() 该节点包含的所有后代节点都会被删除 返回被已删除的节...

网友评论

    本文标题:5-3 DOM节点操作

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