首页
Search
1
pc端小米官网首页部分练习
499 阅读
2
js中的内置对象
491 阅读
3
DOM(节点操作children-自定义属性-)
438 阅读
4
CSS实现动画效果
432 阅读
5
CSS中的选择器
396 阅读
成考高数一
成考英语
英语单词
语法与词汇
成考政治
马克思主义
毛泽东思想
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
登录
Search
标签搜索
冒泡排序
css
float
clear
边框
运算
字体
font
表格
冠词
函数
meta标签
声明bianl
标识符
Number
数据类型
css常用选择器
css关系选择器
css属性选择器
css伪类选择器
小熊猫
累计撰写
47
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
成考高数一
成考英语
英语单词
语法与词汇
成考政治
马克思主义
毛泽东思想
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
6
篇与
DOM
的结果
2022-02-22
DOM核心重点(创增删改查操作属性)
导读:文档对象模型(Document Object Model 简称DOM)是W3C组成推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口W3C已经定义了一系列DOM接口,通过DOM接口可以改变网页的内容,结果和样式对于JavaScript 为了能使操作HTML,Javascript 就有了一套自己的dom编程接口对于HTML,dom使得html形成一颗dom树,包括文档元素和节点关于dom操作我们主要针对于元素的操作,主要有创建 增,删,改,查,属性操作,事件操作创建document.writeinnerHTMLcreateElement增appendChildinsertBefore删removeChild改主要修改dom的元素属性,dom元素的内容,属性,表单的值等修改元素属性;src,href,title等修改普通元素内容:innerHTML,innerText修改表单元素:value,type,disabled等修改元素样式:style,className查:主要获取查询dom的元素DOM停工的API的方法:getElementById getElementsByTagName 古老用法不推荐H5提供新方法:querySelect,querySelectAll 提倡利用节点操作获取元素:父(parentNode),字(children),兄(previousElementSibling,nextElementSiblling)操作属性主要针对于自定义属性setAttribute 设置dom的属性值getAttribute 设置dom的属性值remmoveAttribute 移除属性事件操作给元素注册事件,采取事件源,事件类型 = 事件处理程序鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfous获取鼠标焦点触发onblue失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标弹起触发onmousedown鼠标按下触发
2022年02月22日
258 阅读
0 评论
0 点赞
2022-02-22
DOM(节点操作children-自定义属性-)
导读:排他思想如果有同一组元素,我们想要某一个元素实现某种功能,需要用到循环的排他思想算法所有元素清除样式(干掉其他人)给当前元素设置样式(留下我自己)注意顺序不能颠倒,干掉其他人,在设置自己v<body> <!-- 排他思想 如果有同一组元素,我们想要某一个元素实现某种功能, 需要用到循环的排他思想算法 1.所有元素清除样式(干掉其他人) 2.给当前元素设置样式,(留下我自己) 3.注意顺序不能颠倒,干掉其他人,再设置自己 --> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.getElementsByTagName('button'); //获取的是伪数组 for(var i = 0; i < btns.length; i++) { btns[i].onclick = function(){ for(var i = 0; i<btns.length; i++){ btns[i].style.backgroundColor = ''; } this.style.backgroundColor = 'pink'; } } </script>自定义属性1. 获取元素的属性值(自定义属性){tabs}{tabs-pane label="element.属性"}console.log(div.id);{/tabs-pane}{tabs-pane label="element.getAttribute('属性')"} element.getAttribute('属性'): 1.get 得到获取 2.attribute 属性意思 就是:我们自己添加的属性称为自定义属性 console.log(div.getAttribute('id')); console.log(div.getAttribute('index'));{/tabs-pane}{/tabs}区别:element.属性 获取内置属性值(元素本身自带的属性)element.getAttribute('属性');主要获取自定义属性(标准)我们自己为元素定义的属性设置元素属性值{tabs}{tabs-pane label="element.属性 = '值' "} div.id = 'text'; div.className = 'navs';{/tabs-pane}{tabs-pane label="element.stAttribute('属性','值') "} 主要针对于自定义属性 div.setAttribute('index',2); div.setAttribute('class','footer') class特殊这里写的就是class{/tabs-pane}{/tabs}移除属性removeAttribute{callout color="#f0ad4e"}div.removeAttribute('index');{/callout}H5新增的自定义属性<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector("div"); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); //h5 新增的获取自定义属性的方法 他只能后去data-开头的 //dataset 是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); //如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法 console.log(div.dataset.listName); console.log(div.dataset['listName']); </script>节点操作(children){callout color="#f0ad4e"}父节点: parentNNode得到的是离元素最近的父节点{/callout} DOM提供的(API)获取var ul = document.querySelector('ul');var lis = document.querySelectorAll('li');子节点children{tabs}{tabs-pane label="children(重点)"} console.log(ul.children); 获取所有的子元素节点也是实际开发最常用的,获取的是伪数组,所以有长度{/tabs-pane}{tabs-pane label="childNodes"} 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childnodes[0].noodeType);{/tabs-pane}{/tabs}firstChildfirstChild 第一个子节点,不管是文本节点还是元素节点var ol = document.querySelector('ol');console.log(ol.firstChild);console.loog(ol.lastChild); 实际开发的写法,既没有兼容性问题又返回第一个子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length - 1]);节点操作之创建节点和添加元素创建节点documennt.creatElement('tagName');document.createElement() 方法创建由 tagName 指定HTML元素是根据我们的需求动态生成的,所以我们也称为动态创建元素节点添加节点node.appendChild(child)node.appendChild()方法将一个节点添加到父节点的子节点列表末尾。类似于css里面的after伪元素创建节点元素节点{callout color="#ef4d4d"}var li = documen.createElement('li');{/callout}添加节点 mode.appendChild(child) node 父级 child 字级 后面追加元素类似于数组的pushvar ul =document.queryselect('ul');ul.appendChild(li); 添加节点 node.insertBefore(child,指定元素);var lili = document.createElement('li');ul.insertBefore(lili,ul.children[0]);节点操作之删除节点node.removeChild(child)ul.removeChild(ul.children[0]) <script> // 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); //删除元素 node.removeChild(child) //ul.removeChild(ul.children[0]); //3.点击按钮依次删除里面的孩子 btn.onclick = function(){ if(ul.children.length == 0){ this.disabled = true; }else{ ul.removeChild(ul.children[0]); } } </script>节点操作-复制节点node.cloneNode(); 括号为空那个或者里面为false 浅拷贝只复制标签不复制标签里面的内容node.cloneNode(true);括号为true 深拷贝 复制标签复制里面的内容var ul = document.querySelector('ul');var lili = ul.children[0].cloneNode[true];ul.appendChild(lili);三种创建元素方式区别1.documen.write() 了解创建元素 如果页面文档流加载完毕吗,在调用这句话会导致页面重绘(也就是页面覆盖)2.innerHTML创建元素 var inner = document.querySelector('.inner'); /* for(var i = 0; i <= 100; i++){ inner.innerHTML += '<a href="#">百度</a>'; } */. var arr = []; for(var i = 0; i <= 100; i++){ arr.push('<a href="#">百度</a>'); }3.documen.createElement() 创建元素 var create = document.querySelector('.create'); for(var i = 0; i <=100; i++){ var a = document.createElement('a'); create.appendChild(a); }区别区别:document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘innerHTML 创建对个元素效率更高(不要拼接字符串,采用数组式拼接),结构稍微复杂createElement() 创建多个元素效率稍微低一点点,但是结构更清晰总结:不同浏览器下 innerHTML效率要比 creatElement高,但是innerHTML必须使用数组形式
2022年02月22日
438 阅读
0 评论
0 点赞
2022-02-20
js移动端事件
1.触屏事件概述
2022年02月20日
277 阅读
0 评论
0 点赞
2022-01-29
通过js操作元素之改变元素
导读:JavaScript 的DOM操作可以改变网页内容,结果和样式,我们可以利用DOM操作元素来改变元素里面的内容, 属性 等。注意以下都是属性element.innerText改变元素内容从起始位置到终止位置的内容,但它除html标签,同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行要求:当我们点击按钮,div里面的文字变成当前时间 //1.获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); ///2.注册事件 btn.onclick = function(){ div.innerHTML = getDate(); } //创建获取当前时间函数 function getDate(){ var date = new Date(); //获取当前时间 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五','星期六']; var day = date.getDay(); return '今天是:' + year + '年' + month + "月" + dates + '日' + arr[day]; } //我们元素可以不用添加事件出来 var p = document.querySelector('p'); p.innerText = getDate();innerText和innerHTML区别innerText不能识别html标签 非标准 去除空格和换行div.innerTexr = '今天是:星期五'他会把strong这个标签输出,出来而不是加粗innerHTMLinnerHTML 识别html标签 W3C标准 保留空格和换行,推荐使用表单元素属性操作{callout color="#f0ad4e"}表单元素属性操作:type value checked selected disabled{/callout} <button>按钮</button> <input type="text" value="输入内容"> <script> /* 表单元素的属性操作 type,value,checked,selected,disabled, */ //1.获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); //2.注册事件 处理程序 btn.onclick = function(){ //input.innerHTML = '点击了' ; 这个是 普通盒子 比如 div 标签里面的内容 //表单里面的值 文字内容是通过 value 来修改的 input.value = '你被点击了'; // 如果想要某个表单被禁用 不能再点击 disabled 我们想要禁用这个按钮button /* btn.disabled = true; */ // 或者用this ,this指向的是当前事件函数的调佣着 btn this.disabled = true; } </script>操作元素之样式属性操作通过js修改元素的大小,颜色,位置等样式element.style 行内样式element.className 类名样式注意:js里面的样式采取驼峰命名法比如 fontSize backgroundColorjs修改style样式操作,产生的是行内样式,css权重比较高通过className更改元素样式 <style> div{ width: 100px; height: 100px; background-color: #bfa; } .change{ width: 200px; height: 200px; margin-top:100px; } </style> </head> <body> <div class="first">文本</div> <script> //1.使用element.style 获得元素样式,如果样式比较少 或者 功能简单的情况下使用 var text = document.querySelector('div'); text.onclick = function(){ // 2.我们可以通过 修改元素的className更改元素的样式,适合于样式较多或者复杂的情况 /* this.className = 'change'; */ //3.如果想要哦保留原先的类名,可以这样 this.className = 'first change' } </script> </body> </html>
2022年01月29日
282 阅读
0 评论
0 点赞
2022-01-29
js中的事件
导读:事件三要素事件有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素事件源 :事件被触发的对象 谁 按钮事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过,还是键盘按下事件处理程序去 通过一个函数赋值的方式 完成btn.onclick = function(){}事件执行步骤常见的鼠标事件onclick 鼠标点击左键触发onmouseover 鼠标经过触发onmouseout 鼠标离开触发onfocus 获得鼠标焦点触发onblur 失去鼠标焦点触发onmousemove 鼠标移动触发onmouseup 鼠标弹起触发onmousedown 鼠标按下触发执行事件步骤获取事件 var div = document.querySelector('div')绑定事件,注册事件 div.onclick = function(){}
2022年01月29日
264 阅读
0 评论
0 点赞
1
2