2018-05-21

Dom:

                  Document Object Model 文档对象模型 

                  专门操作网页内容的API

                  1.Dom可进行的操作:

                      查找 修改 添加 删除

                      1)查找

                            A.元素间关系查找  案例见demo01

                                  父子关系:

                                    parentElement; 查找一个元素的父元素

                                    children;查找一个元素的所有孩子

                                    firstElementChild;查找第一个孩子

                                    lastElementChild;查找最后一个孩子

                                  兄弟关系:

                                    previousElementSibling  前一个兄弟元素

                                    nextElementSibling      下一个兄弟元素


                            B.使用HTML元素查找    案例见demo02

                                1.按id查找:

                                    var ele=document.getElementById('id');

                                    特点:只能找到一个

                                          如果没找到返回null


                                2.按class查找:

                                    var ele=document.getElementsByClassName('class');

                                    可以找到多个,返回一个动态集合

                                    如果没找到,返回空集合


                                3.按标签名查找:

                                    var ele=document.getElementByTagName('标签名');

                                    可以找到多个,返回一个动态集合

                                    如果没找到,返回空集合

                                4.按name属性查找

                                    var ele=document.getElementByName('name');


                            C.使用选择器查找

                                1.var ele=document.querySelector('选择器');

                                  特点:只能找到一个,如果找不到,返回null

                                2.var ele=document.querySelectorAll('选择器');

                                  特点:查找多个符合选择器要求的函数,如果没找到,返回[]集合

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,191评论 0 0
  • Chapter 2 : Selecting the elements upon which to act 1. $...
    Azur_wxj阅读 3,051评论 0 1
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,646评论 0 21
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,208评论 0 8
  • 人生是一场有去无回的旅途,你独自行走在繁华的世界间,看路上游人如织,人来人往。 路边小草青翠欲滴,姹紫嫣红的鲜花星...
    林清萓阅读 3,875评论 0 7