![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jsDOM
潇筱子萧
前端人,前端魂,前端都是打工人
展开
-
01-Dom简介
Dom简介 1.什么是Dom? 文档对象模型(document object model),是W3C组织推荐的处理可扩展标记语言(HTML/XML)的标准编程接口。 使用Dom的这些接口,可以帮助改变页面的内容,结构和样式。 2.Dom树 文档 一个页面就是一个文档,Dom中使用document表示 元素 页面中的所有标签都是元素,Dom中使用element表示 节点 网页中的所有内容都是节点 (标签,属性,文本,注释等) ,Dom中使用node表示 注:Dom把以上内容都看做是对原创 2020-12-05 22:41:59 · 79 阅读 · 0 评论 -
02-获取元素
获取元素 1.通过id获取 document.getElementById(字符串参数) <div id='time'> 2020-01-01 </div> let timeElement = document.getElementById('time') //如果找到,就返回该元素对象,如果没有找到就返回null console.dir(timeElement)//这个方法可以打印出一个对象所有的属性和方法 2.根据标签名获取 document.getEle原创 2020-12-05 22:43:18 · 128 阅读 · 0 评论 -
03-事件基础
事件基础 1.事件概述 事件是可以为JS侦测到的行为 简单理解:触发----响应机制 2.事件三要素 事件源 事件被触发的对象 事件类型 事件触发的类型 事件处理程序 一个函数(方法) btn.onclick = function(){ alert('你是憨憨') } //btn-->事件源 //onclick-->事件类型 //function(){}-->事件处理程序(这里是函数表达式,单独这样写会报错) 3.执行事件的步骤 获取事件源—&g原创 2020-12-05 22:44:27 · 275 阅读 · 0 评论 -
04-操作元素
操作元素 1.改变元素内容 element.innerText属性 —可读写 非标准,IE ,不识别html标签,去掉空格和换行 element.innerHTML属性 —可读写 ----推荐 —可动态创建元素 W3C标准,识别html标签 ,保留空格和换行 <button class="btn">按我</button> <div></div> var btn = document.querySelector('.btn') va原创 2020-12-05 22:47:23 · 95 阅读 · 0 评论 -
05-节点操作
节点操作 1.为什么要熟悉结点操作 利用节点层级关系获取元素 逻辑性更强,但是兼容性较差 2.什么是节点 网页中的所有内容都是节点(标签,属性,文本,注释的等),在DOM中,节点使用node表示。 节点的三个基本属性 nodeType(节点类型) 元素节点 nodeType的值为1 属性节点nodeType的值为2 文本节点nodeType的值为3(包括文字,空格,换行等) nodeName(节点名称) nodeValue(节点值) 3.节点层次 父节点 node.paren原创 2020-12-05 22:50:13 · 189 阅读 · 0 评论