【HTML5基础】DOM操作

╰半橙微兮° 2021-12-10 02:47 347阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.自定义属性
 *  2.鼠标点击时Tab栏切换

# 1.自定义属性 #

*  在标签内添加属性，以**data**\-开头

<div class="box" title="盒子" data-my-name="hyo" data-content="我是一个div">div</div>

var box = document.querySelector('.box');/* 获取符合条件的第一个元素。 */
    console.log(box.dataset["myName"]);    //打印结果：hyo，其中js没有-，故N大写

# 2.鼠标点击时Tab栏切换 #

*  需求：  
    1.显示初始选中的内容  
    2.鼠标点击时Tab栏切换
 *  思路：  
    1.初始状态： (function (key) \{\}）（i），key表示当前显示的第几个，i是用户设置的  
    2.点击切换：排他思想
 *  步骤：

1.  html5：  
    导航栏：nav标签，存放超链接  
    内容：section标签，class=cont，均一样；id=导航栏中的data-cont值；存放ul列表，
2.  js-初始状态：

var navs = document.querySelectorAll('nav a');// 获取符合条件的所有元素

遍历navs的长度，若key=i，则给导航栏添加激活标签：

navs[i].classList.add('active');

显示该导航下的内容：

var secId = navs[i].dataset['cont'];//将该导航自定义属性值赋给列表内容的id
     document.querySelector('#' + secId).style.display = 'block';// 默认都是none，但该id对应的显示

3.js-点击切换：  
点击事件内排他，首先捕获：

var currentNav = document.querySelector('.active');
     var currentId = currentNav.dataset['cont'];

清除：

currentNav.classList.remove('active');
    document.querySelector('#' + currentId).style.display = 'none';

显示：

this.classList.add('active');
     var myId = this.dataset['cont'];
     document.querySelector('#' + myId).style.display = 'block';

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 84 阅读

相关 DOM基础操作

javaScript的组成 1. js语法：ECMAScript 2. DOM：Document Object Model（文本对象模型），可以操作html+css

痛定思痛。/ 2023年06月07日 08:17/ 0 赞/ 51 阅读

相关 DOM操作HTML（JS加强）

DOM简介和解析HTML DOM 文档对象类型 Document Object Model 文档：标记型文档（HTML/XML）对象：封装属性和行为（方法）

浅浅的花香味﹌/ 2022年09月25日 13:27/ 0 赞/ 166 阅读

相关 html5-Dom操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2022年07月14日 00:41/ 0 赞/ 166 阅读

相关 HTML-使用jQuery操作 DOM

DOM操作分为三类： 1. DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() 2. HTML-DOM：用于处理HTML文

电玩女神/ 2022年05月12日 08:30/ 0 赞/ 218 阅读

相关 HTML5 音频 / 视频 DOM 操作

目录 HTML5 音频 / 视频 DOM 操作 HTML5 Audio/Video 方法 HTML5 Audio/Video 属性 HTML5 Audio/Video

清疚/ 2022年05月09日 13:40/ 0 赞/ 276 阅读

相关 dom基础5

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

傷城~/ 2022年01月19日 01:11/ 0 赞/ 239 阅读

相关 DOM操作基础

ownerDocument 返回元素的 ownerDocument offsetParent 获取父节点（找有定位的父节点，没有定位默认是body，ie7以下定位在自己是h

淩亂°似流年/ 2021年12月22日 23:21/ 0 赞/ 317 阅读

相关【HTML5基础】DOM操作

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.自定义属性 2.鼠标点击时T

╰半橙微兮°/ 2021年12月10日 02:47/ 0 赞/ 348 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 636 阅读