DOM 选择器

快来打我* 2023-08-17 15:38 104阅读 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不兼容

发表评论取消回复

表情：

评论列表（有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM节点选择器

一，id获得元素 <body> <div id="div"> id获得元素 </div> </...

港控/mmm°/ 2024年04月19日 09:34/ 0 赞/ 56 阅读

相关 jQuery -- 选择器、DOM、CSS操作

什么是Jquery：是一个javascript库（主旨-用更少的代码实现更多的功能） 1、中文API在线查阅 [http://t.mb5u.com/jquery/][http

旧城等待，/ 2024年02月18日 17:50/ 0 赞/ 67 阅读

相关 DOM 选择器

DOM中的选择器 1.getElementById(id) //获取指定元素的ID元素 2.getElements

快来打我*/ 2023年08月17日 15:38/ 0 赞/ 105 阅读

相关 JavaScript-dom选择器||节点

dom选择器。我们知道document表示文档，我们就是通过document里面的方法选择标签。 1：document.getElementById(); 通过选择Id

今天药忘吃喽~/ 2022年05月27日 08:59/ 0 赞/ 238 阅读

相关 DOM元素节点选择器语法注意点

1. window是载入浏览器的标签，在JavaScript中用Window对象来表示，使用这个对象的可用方法，你可以返回窗口的大小（参见Window.innerWidth和

末蓝、/ 2022年05月21日 05:55/ 0 赞/ 229 阅读

相关 js-DOM选择器

目录一、文本操作 1、纯文本 2、带有标签效果的文本设置 3、案例案例1、操作文本节点内容案例2、点击按钮出来弹框案例3、点击弹框修改文本内容和地址

拼搏现实的明天。/ 2022年03月15日 09:35/ 0 赞/ 270 阅读

相关 js-DOM api选择器

一、选择器（找元素） 1: document.getElementById('id名') 2: document.getElementsByClassName('类名

一时失言乱红尘/ 2022年03月11日 21:20/ 0 赞/ 219 阅读

相关 jQuery选择器和对DOM的操作

一、jQuery选择器 1.基本选择器元素选择器，语法`$("html标签名")`，例：查找所有div下span元素的个数 `$("div,span").siz

￡神魔★判官ぃ/ 2022年01月23日 00:01/ 0 赞/ 299 阅读

相关 JavaScript dom基础篇之标签选择器

![20190725131628925.png][] ![20190725131635979.png][]![watermark_type_ZmFuZ3poZW5naGVpdG

系统管理员/ 2021年11月22日 15:08/ 0 赞/ 184 阅读

相关 js dom-选择器

dom 选择器 document.querySelector("选择器") 返回第一个匹配的节点，没用返回null doc

た入场券/ 2021年07月24日 23:34/ 0 赞/ 399 阅读