搜索到
6
篇与
DOM
的结果
-
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鼠标按下触发 -
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必须使用数组形式
-
-
通过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>
-
js中的事件 导读：事件三要素事件有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素事件源 ：事件被触发的对象 谁 按钮事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过，还是键盘按下事件处理程序去 通过一个函数赋值的方式 完成btn.onclick = function(){}事件执行步骤常见的鼠标事件onclick 鼠标点击左键触发onmouseover 鼠标经过触发onmouseout 鼠标离开触发onfocus 获得鼠标焦点触发onblur 失去鼠标焦点触发onmousemove 鼠标移动触发onmouseup 鼠标弹起触发onmousedown 鼠标按下触发执行事件步骤获取事件 var div = document.querySelector('div')绑定事件，注册事件 div.onclick = function(){}
