wx62aac82759217的博客_DOM对象

DOM的重要基础

DOM重点核心-基础获取元素有哪两种方法方法？ 1 利用DOM提供的方法获取元素。 document.getElementbyId(),document.getELmenntbyTagName() document,getElementsByClassName('') document.query

html

元素节点

实际开发

原创 2022-06-16 20:54:57 108 阅读

创建动态创建元素的区别

document.write(); element.innerHTML; document.createElement(); 区别 document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

html

i++

重绘

原创 2022-06-16 20:54:15 180 阅读

获得鼠标在页面上的坐标

鼠标事件

当前页

原创 2022-06-16 18:12:16 113 阅读

兄弟节点

<body> <div>我是div</div> <span>我是span</span> </body> <script> var div = document.querySelector("div"); // 1.nextSibling 下一个兄弟节点包含节点或者文本节点等等 console.l

封装

元素节点

原创 2022-06-16 18:03:48 215 阅读

新浪下拉菜单

<body> <ul> <li id="top">微博</li> <li class="hide">私信</li> <li class="hide">评论</li> <li class="hide">@我</li> </ul> </body> <script> // 大概方法： // 1.获取元素

ide

i++

下拉菜单

原创 2022-06-16 18:03:41 180 阅读

简单的留言板(添加和删除)

赋值

javascript

html

原创 2022-06-16 18:03:25 91 阅读

元素操作之创建和添加节点

添加节点 1. node.appendChild(child) node.appendChild( ) 方法将一个节点添加到指定父节点列表末尾。类似于css里面的after <body> <ul> <li>123</li> </ul> </body> <script> // 1.创建节点元素节点 v

添加节点

父节点

数组

原创 2022-06-16 18:02:57 95 阅读

删除元素节点

当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接需要把所有链接获取过来，当我们点击当前的链接的时候，删除当亲链接所在的li 阻止链接跳转需要添加JavaScript:void(0);或者JavaScript:; <body> <button>删除</button> <ul> <li>张

javascript

文本域

赋值

原创 2022-06-16 18:02:08 112 阅读

复制节点

复制节点 node.cloneNode() node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> let ul = docu

子节点

浅拷贝

深拷贝

原创 2022-06-16 18:02:02 60 阅读

动态生成表格

for循环

html

javascript

原创 2022-06-16 18:01:56 149 阅读

阻止事件冒泡

<body onclick="alert('body')">  <div style="width: 400px; height: 400px; background: red" onclick="alert(this.style.background)" > <div id=

html

jquery

事件冒泡

原创 2022-06-16 17:59:56 262 阅读

注册事件

<body> <button>注册事件</button> </body> <script> let arr = "asdfdgd"; let aar = 0; for (let i = 0; i < arr.length; i++) { aar += arr[i]; } console.log(aa

i++

原创 2022-06-16 17:58:54 57 阅读

事件委托点击li改变li的背景颜色

事件委托

子节点

父节点

原创 2022-06-16 17:58:20 1009 阅读

常见事件对象属性和方法

<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> </body> <script> // 常见事件对象的属性和方法 // 1.e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象

事件对象

绑定事件

原创 2022-06-16 17:57:17 54 阅读

阻止默认行为

事件对象

不执行

原创 2022-06-16 17:56:39 121 阅读

禁止选中文字和右键菜单

<body> 这句话有自己的想法 </body> <script> // 1.禁止鼠标右键菜单 // contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认上下文菜单 document.addEventListener("contextmenu", function (e) {

上下文菜单

右键菜单

原创 2022-06-16 17:56:14 108 阅读

节点操作之父节点

<body> <div class="box"> <span class="erweima">**</span> </div> </body> <script> // 1.父节点 parentNode let erweima = document.querySelector(".erweima");

父节点

父级元素

原创 2022-06-16 17:29:24 113 阅读

排他思想

<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </body> <script> // 获取所有按钮元素 let btns

背景颜色

i++

数组

原创 2022-06-16 17:29:18 98 阅读

tab栏切换

自定义属性

i++

原创 2022-06-16 17:29:12 102 阅读

获取自定义属性值

1.获取属性值 element ?属性获取属性值 element.getAttribute('属性') 区别： element.属性获取内置属性值(元素本身自带属性) element.getAttribute('属性');主要获得自定义的属性(标准)我们程序员自定义的属性 <body> <di

属性值

自定义

自定义属性

原创 2022-06-16 17:29:06 767 阅读

获取子节点

parentNode.children(非标准); parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点掌握) 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 DOM提供的获取 (API)获取 <b

元素节点

只读属性

子节点

原创 2022-06-16 17:28:59 201 阅读

节点操作之第一个子元素和最后一个子元素

<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script> let ul = document.querySelector("ul"); // 2.children 实际开发的写法

元素节点

实际开发

兼容性问题

原创 2022-06-16 17:28:53 166 阅读

循环精灵图

css

i++

javascript

原创 2022-06-16 17:26:40 42 阅读

getElementById获取元素

1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 2.get 获得element 元素by通过驼峰命名法 3.参数 id是大小写敏感的字符串 4.返回的是一个元素对象 <script> var itmer = document.getElementById("t

加载

大小写敏感

字符串

原创 2022-06-16 17:26:34 210 阅读

H5新增元素方式

<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> </body> <script> // 1.getElement

选择器

类名

原创 2022-06-16 17:26:28 112 阅读

DOM简介

什么是DOM 文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 W#C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构样式 DOM 树文档：一个页面就是文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用e

html

对象模型

标记语言

原创 2022-06-16 17:26:22 76 阅读

getElementsByTagName获取某类标签元素

<body> <ul> <li>知否知否0</li> <li>知否知否1</li> <li>知否知否2</li> <li>知否知否3</li> <li>知否知否4</li> <li>知否知否5</li> </ul> <ol id="ol1"> <li>张三1</li> <li>李四2</li> <l

数组

标签名

i++

原创 2022-06-16 17:26:15 102 阅读

.获取body和html元素

html

原创 2022-06-16 17:26:05 495 阅读

修改元素过程

前端开发

原创 2022-06-16 17:26:00 280 阅读

执行事件的步骤

1.获取事件源2.注册事件(绑定事件)3.添加事件处理程序(采用函数赋值形式) <script> var dianji = document.getElementById("dianji"); dianji.onclick = function () { console.log("我被选中了");

赋值

事件源

绑定事件

原创 2022-06-16 17:25:51 70 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx62aac82759217的博客