02-DOM选择器

我就是我 2023-07-18 02:45 16阅读 0赞

## 02-DOM选择器 ##

Document Object Model（文档对象模型）  
我们把这个html看做一个对象树（DOM树），DOM是html文档结构，让js操作html元素而制定的一个规范；DOM的操作对象是文档（Document）  
html文件：

<div id="div">hello div</div>
    		<div id="div2">hello div2</div>
    
    		<h1>hello h1</h1>
    		<h1>hello h1</h1>
    
    		<div class="demo">hello demo1</div>
    		<div class="demo">hello demo2</div>
    
    		<p name="p">hello p</p>
    		<p name="p">hello p</p>
    
    		<h1 id="h">h1</h1>
    		<h1 class="a">h1</h1>
    		<p>p</p>
    
    		<h2 class="h2">h2</h2>
    		<h2 class="h2">h2</h2>

js文件：

document.getElementById('div').innerHtml = "hello";   //通过ID选择器来选择标签
    document.getElementsByTagName("h1")[1].innerHTML = "您好 h1"; //通过标签名
    document.getElementsByClassName("demo")[0].style.color="blue"; //通过Class选择器
    document.getElementsByName("p")[0].style.background="yellow"; //通过name属性
    document.querySelector("#h").innerHTML="您好 div"; //可以像css一样，选择标签
    document.querySelector(".a").innerHTML="您好 aaa";
    document.querySelector("p").innerHTML="您好 ppp";
    document.querySelectorAll(".h2")[1].style.color="red"; //选择所有的，返回类似数组

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML DOM节点选择器

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

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

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

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

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

相关 DOM 选择器

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

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

相关 02-DOM选择器

02-DOM选择器 Document Object Model（文档对象模型）我们把这个html看做一个对象树（DOM树），DOM是html文档结构，让js操作ht

我就是我/ 2023年07月18日 02:45/ 0 赞/ 17 阅读

相关 DOM选择器

那么首先来介绍一下js的三大组成 ECMAscript规定，如何在BOM中操作DOM DOM(W3C机构)不属于BOM(浏览器厂商) window对象身上提供doc

ゝ一纸荒年。/ 2023年02月22日 15:55/ 0 赞/ 20 阅读

相关前端基础-02-CSS选择器

前端基础-CSS样式 1. CSS样式常用的三种引用方式： CSS样式分为3种: 优先级：行内样式>内嵌样式>外部样式 1.行内样式：

傷城~/ 2022年06月05日 01:18/ 0 赞/ 235 阅读

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

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

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

相关 js-DOM选择器

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

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

相关 js-DOM api选择器

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

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

相关 js dom-选择器

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

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