首页
Search
1
pc端小米官网首页部分练习
659 阅读
2
js中的内置对象
617 阅读
3
CSS实现动画效果
597 阅读
4
DOM(节点操作children-自定义属性-)
575 阅读
5
CSS中的选择器
549 阅读
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伪类选择器
css伪元素
css选择器的权重
a元素的伪类
浮动
Typecho
累计撰写
35
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
1
篇与
的结果
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日
575 阅读
0 评论
0 点赞