美文网首页
DOM 选择器

DOM 选择器

作者: the丶hao | 来源:发表于2019-08-23 19:19 被阅读0次

    DOM中的选择器

    1.getElementById(id)        //获取指定元素的ID元素

    2.getElementsByTagName()    //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组

    3.getElementsByName()       //通过name值获取元素,返回值是数组,通常用来获取有name的input的值

    4.getElementsByClassName()  //通过class名获取元素,返回值是数组n


    ES5选择器:

    document.querySelectorAll();    //强大到超乎想象,支持IE8+。ECMAScript借鉴了jQuery选择器的

    //返回一个数组,哪怕只有一个元素

    document.querySelector();


    高级选择器

    对象.childNodes              //获取当前元素节点的所有子节点    

    对象.ownerDocument           //获取该节点的文档根节点,相当与 document

    对象.firstChild              //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)

    对象.firstElementChild       //获得第一个非空白的子节点。(IE7/8不支持)

    对象.lastChild               //获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)

    对象.lastElementChild        //获得最后一个非空白的子节点。(IE7/8不支持)

    对象.nextSibling             //获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点)

    对象.nextElementSibling      //获得下个兄弟节点。(IE7/8不支持)

    对象.previousSibling         //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点)

    对象.prveiousElementSibling  //获得上一个兄弟节点。(IE7/8不支持)


DOM元素的增删改查

    查询:选择器;

    创建:createElement()  配合  appendChild()    将创建好的元素,插入到某个标签内的最后

    删除:removeChild()  配合  parentNode

                元素.remove()    直接删除当前元素

    document.body.removeChild(div);

    修改: outerHTML        var od = document.querySelector("#box");

     od.outerHTML = "<span class='"+ od.className +"'>"+ od.innerHTML +"</span>";


    DOM属性的操作

    也就是对DOM进行增删改查

    DOM的属性操作,增删改查

    什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等

    元素的属性是什么,分为两种,一种叫内置属性,一种叫非内置属性。

 内置属性可以直接通过点"."进行操作

    tagName               //返回值是当前元素的标签名

    innerHTML/innerText  //返回值是当前元素的内容

    id                    //返回值是当前元素的ID

    title                 //获取title的标签值,这个title是从document中获取的

    className             //返回值是当前元素的class

    href                  //返回值是当前的href的值

    以上这些属性既可以获取,也可以设置

    非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点

    getAttribute()        //获取 元素的属性

    setAttribute()        //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值

    removeAttribute()     //删除 元素的属性,低版本的IE不兼容

相关文章

  • jquery学习

    $("selector")支持所有css选择器 $("selector",dom)从指定dom中根据选择器查找元素...

  • 移动端性能优化(4)

    脚本类 尽量使用id选择器 选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。 合理缓存DOM对象 ...

  • 固定导航栏案例

    复习 jQuery操作DOM 选择器 基本选择器:#id 、.class 、element、* 、 层级选择器: ...

  • 移动端性能优化(4)

    脚本类尽量使用id选择器选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。 合理缓存DOM对象对于需...

  • 2020 原生JS - DOM操作

    DOM 选择器 nodeType DOM操作 1. 新增 2. 插入

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • js获取Dom对象

    通过id获取Dom 通过class获取dom 通过标签获取dom 通过name属性获取dom 通过选择器query...

  • javascript 实战基础

    1、查找搜索选择器 - 获取对象DOM 2、查找搜索选择器 - 获取对象DOM 注册事件 绑定事件行内注册事件 b...

  • 无线web开发经验(4)—— Javascript

    DOM选择器 html5为了我们提供了一个非常好的DOM选择器,就是document.querySelector和...

网友评论

      本文标题:DOM 选择器

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