元素相关

获取元素

根据标签id

document.getElementById();
image.png

根据标签名

document.getElementByTagName();

返回的是获取过来的元素对象集合，以伪数组的形式存储，可以采取遍历的方式来获取伪元素中的对象，得到的元素对象是动态的

还可以获取父元素内部所有指定标签名的子元素

父元素必须是单个对象，获取时不包括父元素自己

html5新增 获取元素

根据类名获取

document.getElementByClassName();

根据选择器

document.querySelector()

.ClassName

idName

方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。

document.querySelectorAll()

指定选择器的所有元素对象

获取特殊元素body html

document.body()

document.documentElement()

事件基础

事件是可以被js侦测到的行为

触发—相应机制

三要素

事件源：事件被触发的对象

事件类型：如何触发

事件处理程序：通过函数赋值完成

  1. <body>
  2.     <button id="btn">我是一个按钮</button>
  3.     <script>
  4.         var btn = document.getElementById('btn');
  5.         btn.onclick =function () {
  6.             alert('你好牛,真的按到我了呢！');
  7.         }
  8.     </script>
  9. </body>

执行事件的过程

  1. 获取事件源
  2. 注册事件、绑定事件
  3. 添加事件处理程序

image.png

操作元素

element.innerText()

从起始位置到终止位置的内容，不包括html标签，去除空格和换行

element.innerHtml()

W3C标准

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

这两个元素可读写

例子

如果是要按按钮触发图片的更换，应该也获取图片这一元素

图片地址后面要加.jpg

  1.     <button id="hh">我是按钮1</button>
  2.     <button id="xx">我是按钮2</button>
  3.     <img src="./pic/abcd.jpg" alt="">
  4.     <script>
  5.         var img =document.querySelector('img');
  6.         var hhh = document.getElementById('hh');
  7.         hhh.onclick = function() {
  8.             img.src = './pic/pic2.jpg';
  9.         }
  10.         var xxx = document.getElementById('xx');
  11.         xxx.onclick = function() {
  12.             img.src = './pic/pic1.jpg';
  13.         }
  14.     </script>
  1.     <img src="./pic/morning.png" alt="">
  2.     <div>Happy Everyday</div>
  3.     <script>
  4.         var img = document.querySelector('img');
  5.         var div = document.querySelector('div');
  6.         var date = new Date();
  7.         var h = date.getHours();
  8.         if(h<12) {
  9.             img.src = './pic/morning.png';
  10.             div.innerHTML = '早上好哦宝贝';
  11.         }
  12.         else if(h < 18) {
  13.             img.src = './pic/fighting.png';
  14.             div.innerHTML = '下午好哦宝贝'
  15.         } else {
  16.             img.src = './pic/evening.png';
  17.             div.innerHTML = '晚上好哦宝贝'
  18.         }
  19.     </script>
  1. <body>
  2.     <button>我是一个可爱的按钮(●'◡'●)</button>
  3.     <input type="text" value="你要输入啥呢">
  4.     <script>
  5.         var btn = document.querySelector('button');
  6.         var input = document.querySelector('input');
  7.         btn.onclick = function() {
  8.             //input.innerHTML=''; 这个是普通盒子比如div标签元素里面的内容，表单里面的值是通过value修改的
  9.             input.value='哎呀,我被点击了！';
  10.              btn.disabled = true ;
  11.         }
  12.         btn.onmouseout = function() {
  13.             input.value='不要走，嘤嘤嘤';
  14.         }
  15.     </script>
  16. </body>

btn.disabled = true ;表单禁用

this.disabled = true ;this指向的是表单的调用者 btn

样式属性操作

我们可以通过js修改元素的大小颜色和样式

element.style ： 样式比较少，功能简单

element.className : 将样式写入CSS，js只用添加这个样式即可，会直接覆盖原先的类名，要想保留，就两个类名都写上，中间用空格隔开（多类名选择器）

this.className = 'change' ;

  1. js里面的样式采取驼峰命名法
  2. js修改style的样式产生的是行内样式，CSS权重比较高

例子：搜索栏
  1.     <style>
  2.         input {
  3.             color: #999;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <input type="text" value="手机" name="" id="">
  9.     <script>
  10.         var text = document.querySelector('input');
  11.         // 获得焦点事件
  12.         text.onfocus = function () {
  13.             if(text.value === '手机') {
  14.                 this.value = ' ';
  15.             }
  16.             //获得焦点把文本框颜色变深
  17.             this.style.color = '#333';
  18.         }
  19.         text.onblur = function () {
  20.             if(text.value === ' ') {
  21.                 this.value = '手机';
  22.             }
  23.             this.style.color = '#999';
  24.         }
  25.     </script>
  26. </body>

例子：密码框明文密文转换
  1.     <style>
  2.         .box {
  3.             position: relative;
  4.             width: 400px;
  5.             /* border : 1px solid #ccc; */
  6.             margin: 100px;
  7.         }
  8.         .box input {
  9.             width: 370px;
  10.             height: 30px;
  11.             border: 0;
  12.             outline: none;
  13.         }
  14.         .box img {
  15.             position: absolute;
  16.             top: 2px;
  17.             right: 2px;
  18.             width: 24px;
  19.         }
  20.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <label for="">
  26.             <img src="./pic/images1/close.png" alt="" id="eye">
  27.         </label>
  28.         <input type="password" id="pwd">
  29.     </div>
  30.     <script>
  31.         var eye =document.getElementById('eye');
  32.         var pwd =document.getElementById('pwd');
  33.         // 元素多用id获取元素
  34.         let flag=0;
  35.         eye.onclick = function () {
  36.             if(flag == 0) {
  37.                 pwd.type ='text';
  38.                 eye.src ='./pic/images1/open.png';
  39.                 flag=1;
  40.             } else {
  41.                 pwd.type ='password';
  42.                 eye.src ='./pic/images1/close.png';
  43.                 flag=0;
  44.             }
  45.         }
  46.     </script>
  47. </body>

排他思想

如果有同一组元素，要实现某个同样的样式，需要用到循环的排他思想算法

  1. 所有元素全部清除样式
  2. 给当前元素设置样式
  3. 注意不能颠倒顺序

例子：按钮换色
  1. <body>
  2.     <button>我是按钮</button>
  3.     <button>我是按钮</button>
  4.     <button>我是按钮</button>
  5.     <button>我是按钮</button>
  6.     <button>我是按钮</button>
  7.     <script>
  8.         var btn= document.getElementsByTagName('button');
  9.         for(let i=0;i<btn.length;i++) {
  10.             btn[i].onclick = function () {
  11.                 for(let j=0;j<btn.length;j++) {
  12.                     btn[j].style.backgroundColor='';
  13.                     // 这里不能留空。。。不然会设置颜色回默认失败
  14.                 }
  15.                 btn[i].style.backgroundColor='pink';
  16.             }
  17.         }
  18.     </script>
  19. </body>

例子：换背景图

image.png

例子：表格高亮

image.png

例子：表单全选和取消全选
  1. <body>
  2.     <div class="box">
  3.         <table>
  4.             <thead>
  5.                 <tr>
  6.                     <td><input type="checkbox" id="j_cbAll"></td>
  7.                     <th>goods</td>
  8.                     <th>price</td>
  9.                 </tr>
  10.             </thead>
  11.             <tbody id="j_tb">
  12.                 <tr>
  13.                     <td><input type="checkbox"></td>
  14.                     <td>iphone</td>
  15.                     <td>2000</td>
  16.                 </tr>
  17.                 <tr>
  18.                     <td><input type="checkbox"></td>
  19.                     <td>ipad</td>
  20.                     <td>3000</td>
  21.                 </tr>
  22.                 <tr>
  23.                     <td><input type="checkbox"></td>
  24.                     <td>MacBook</td>
  25.                     <td>2500</td>
  26.                 </tr>
  27.             </tbody>
  28.         </table>
  29.     </div>
  31.     <script>
  32.         var j_cbAll = document.getElementById('j_cbAll');
  33.         var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
  34.         j_cbAll.onclick = function() {
  35.             console.log(this.checked) ;//得到当前复选框的选定状态
  36.             for(let i=0;i<j_tbs.length;i++) {
  37.                 j_tbs[i].checked = this.checked;
  38.             }
  39.         }
  41.         for(let j=0;j<j_tbs.length;j++) {
  42.             j_tbs[j].onclick = function () {
  43.                 let flag=true;
  44.                 for(let k=0;k<j_tbs.length;k++) {
  45.                     if(!j_tbs[k].checked) {
  46.                         flag=false;
  47.                         break;
  48.                     }
  49.                 }
  50.                 j_cbAll.checked=flag;
  51.             }
  52.         }
  54.     </script>
  55. </body>

自定义属性操作

获取

element.属性

获取内置属性值—元素本身自带的属性

element.getAttribute(‘属性’)

程序员自行添加的属性称为自定义属性（data-index）

设置

element.属性=’值’；

element.setAttribute(‘属性’，’值’)

修改clss时修改的是’Class’不是’ClassName’

移除

element.removeAttribute(‘属性’)；

例子：tab栏切换
  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  7.         li {
  8.             list-style-type: none;
  9.         }
  11.         .tab {
  12.             width: 978px;
  13.             margin: 100px auto;
  14.         }
  16.         .tab_list {
  17.             height: 39px;
  18.             border: 1px solid #ccc;
  19.             background-color: #f1f1f1;
  20.         }
  22.         .tab_list li {
  23.             float: left;
  24.             height: 39px;
  25.             line-height: 39px;
  26.             padding: 0 20px;
  27.             text-align: center;
  28.             cursor: pointer;
  29.         }
  31.         .tab_list .current {
  32.             background-color: #c81623;
  33.             color: #fff;
  34.         }
  36.         .item_info {
  37.             padding: 20px 0 0 20px;
  38.         }
  40.         .item {
  41.             display: none;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="tab">
  47.         <div class="tab_list">
  48.             <ul>
  49.                 <li class="current">商品介绍</li>
  50.                 <li>规格与包装</li>
  51.                 <li>售后保障</li>
  52.                 <li>商品评价(50000)</li>
  53.                 <li>手机社区</li>
  54.             </ul>
  55.         </div>
  56.         <div class="tab_con">
  57.             <div class="item" style="display: block;">
  58.             <!-- <div class="item"> -->
  59.                 商品介绍模块内容
  60.             </div>
  61.             <div class="item">
  62.                 规格与包装模块内容
  63.             </div>
  64.             <div class="item">
  65.                 售后保障模块内容
  66.             </div>
  67.             <div class="item">
  68.                 商品评价(50000)模块内容
  69.             </div>
  70.             <div class="item">
  71.                 手机社区模块内容
  72.             </div>
  73.         </div>
  74.     </div>
  75.     <script>
  76.         var tab_list = document.querySelector('.tab_list');
  77.         var lis = tab_list.querySelectorAll('li');
  78.         var items = document.querySelectorAll('.item');
  79.         for(let i=0;i<lis.length;i++) {
  80.             lis[i].setAttribute('index',i);
  81.             lis[i].onclick = function() {
  82.                 for(let j=0;j<lis.length;j++) {
  83.                     console.log('hi');
  84.                     lis[j].className=' ';
  85.                     //这里需要空格来置空or不留空格都行。。，注意Class的写法qwq
  86.                 }
  87.                 this.className='current';
  89.                 var index=this.getAttribute('index');
  90.                 for(let j=0;j<items.length;j++) {
  91.                     items[j].style.display='none';
  92.                 }
  93.                 items[index].style.display='block';
  94.             }
  95.         }
  96.     </script>

html5自定义属性

为了保存并使用数据，有些数据可以保存到页面中而不可以保存到数据库里

h5规定自定义属性以data-开头为属性名并赋值

dataset是一个集合，存放了所有以data-开头的自定义属性，ie11才开始使用

element.dataset.index

element.dataset[‘index’]

如果自定义属性里面有多个链接的单词采用驼峰命名法

节点操作

父节点

node.parentNode 可以返回某节点的父节点，是距离最近的一个父节点，如果指定节点没有父节点，则返回null

子节点

node.childNodes （换行属于文本节点）包括所有子节点，包括文本（nodeType3）、元素结点（nodeType1）

node.children 是一个只读属性，返回所有子元素结点，其余节点不返回

第一个和最后一个子元素

node.firstChild：返回的是子节点，不管是文本还是元素结点

node.lastChild：返回的是子节点，不管是文本还是元素结点

node.firstElementChild：返回的是子元素节点，ie9以上使用

node.LastElementChild

实际使用：

node.children[0]

node.children[node.children.length-1]

例子：下拉菜单
  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  7.         li {
  8.             list-style-type: none;
  9.         }
  11.         a {
  12.             text-decoration: none;
  13.             font-size: 14px;
  14.         }
  16.         .nav {
  17.             margin: 100px;
  18.         }
  20.         .nav>li {
  21.             position: relative;
  22.             float: left;
  23.             width: 80px;
  24.             height: 41px;
  25.             text-align: center;
  26.         }
  28.         .nav li a {
  29.             display: block;
  30.             width: 100%;
  31.             height: 100%;
  32.             line-height: 41px;
  33.             color: #333;
  34.         }
  36.         .nav>li>a:hover {
  37.             background-color: #eee;
  38.         }
  40.         .nav ul {
  41.             display: none;
  42.             position: absolute;
  43.             top: 41px;
  44.             left: 0;
  45.             width: 100%;
  46.             border-left: 1px solid #FECC5B;
  47.             border-right: 1px solid #FECC5B;
  48.         }
  50.         .nav ul li {
  51.             border-bottom: 1px solid #FECC5B;
  52.         }
  54.         .nav ul li a:hover {
  55.             background-color: #FFF5DA;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <ul class="nav">
  61.         <li>
  62.             <a href="#">微博</a>
  63.             <ul>
  64.                 <li>
  65.                     <a href="">私信</a>
  66.                 </li>
  67.                 <li>
  68.                     <a href="">评论</a>
  69.                 </li>
  70.                 <li>
  71.                     <a href="">@我</a>
  72.                 </li>
  73.             </ul>
  74.         </li>
  75.         <li>
  76.             <a href="#">微博</a>
  77.             <ul>
  78.                 <li>
  79.                     <a href="">私信</a>
  80.                 </li>
  81.                 <li>
  82.                     <a href="">评论</a>
  83.                 </li>
  84.                 <li>
  85.                     <a href="">@我</a>
  86.                 </li>
  87.             </ul>
  88.         </li>
  89.     </ul>
  90.     <script>
  91.         var nav = document.querySelector('.nav');
  92.         var lis = nav.children;
  93.         for(let i=0;i<lis.length;i++) {
  94.             lis[i].onmouseover =function () {
  95.                 this.children[1].style.display ='block';
  96.             }
  97.             lis[i].onmouseout =function () {
  98.                 this.children[1].style.display ='none';
  99.             }
  100.         }
  101.     </script>

兄弟节点

node.nextSibling：返回当前元素下一个兄弟节点，找不到则返回null，同样也是包含所有节点

node.previousSibling

node.nextElementSibling

node.previousElementSibling

兼容性问题：自己封装一个兼容性函数

  1. function getNextElementSibling(element) {
  2.     var el =element;
  3.     while(el=el.nextSibling) {
  4.         if(el.nodeType == 1) {
  5.             return e1;
  6.         }
  7.     }
  8.     return null;
  9. }

创建节点

document.createElement(‘ ‘)；创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们需求动态生成的，因此也成为动态创建元素节点

添加节点

node.appendChild(child)；将一个节点添加到指定父元素的子节点列表末尾

node.insertBefore(child,指定元素)；

例子：评论发布
  1.     <textarea name="" id=""></textarea>
  2.     <button>发布</button>
  3.     <ul></ul>
  5.     <script>
  6.         var btn = document.querySelector('button');
  7.         var text = document.querySelector('textarea');
  8.         var ul = document.querySelector('ul');
  10.         btn.onclick = function() {
  11.             if(text.value == '') {
  12.                 alert('发布的内容不能为空');
  13.                 return false;
  14.             } else {
  15.                 let li =document.createElement('li');
  16.                 li.innerHTML = text.value;
  17.                 ul.insertBefore(li,ul.children[0]);
  18.             }
  20.         }
  21.     </script>

删除节点

node.removeChild(child)；
image.png

阻止链接跳转

javascript:;

javascript:void(0);

例子：评论删除
  1.     <script>
  2.         var btn = document.querySelector('button');
  3.         var text = document.querySelector('textarea');
  4.         var ul = document.querySelector('ul');
  6.         btn.onclick = function() {
  7.             if(text.value == '') {
  8.                 alert('发布的内容不能为空');
  9.                 return false;
  10.             } else {
  11.                 let li =document.createElement('li');
  12.                 li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
  13.                 ul.insertBefore(li,ul.children[0]);
  14.             }   
  15.             var as = document.querySelectorAll('a');
  16.             // 这个不能写在里面，因为每点击一次发布就得检索按钮的个数；写在外面的话程序运行一次就结束了，没有检索到按钮的个数
  17.             for(let i=0;i<as.length;i++) {
  18.                 as[i].onclick = function() {
  19.                     // a所在的li即是a的父节点
  20.                     ul.removeChild(this.parentNode);
  21.                 }
  22.             }
  23.         }
  24.     </script>

删除按钮不能正常运行的原因：因为每点击一次发布就得检索按钮的个数；写在外面的话程序运行一次就结束了，没有检索到按钮的个数

复制节点

node.cloneNode()；

该方法返回调用该方法的结点的一个副本

如果括号为空或者里面为false则为浅拷贝，只复制节点本身，不克隆里面的子节点

参数为true则为深拷贝

例子：动态生成表格
  1. <body>
  2.     <table>
  3.         <thead>
  4.             <tr>
  5.                 <th>姓名</th>
  6.                 <th>科目</th>
  7.                 <th>成绩</th>
  8.                 <th>操作</th>
  9.             </tr>
  10.         </thead>
  11.         <tbody></tbody>
  12.     </table>
  14.     <script>
  15.         var datas =[{
  16.             name : '黄小迪',
  17.             subject : 'java',
  18.             score :100
  19.         },{
  20.             name : '黄小瑜',
  21.             subject : 'javascript',
  22.             score :100
  23.         },{
  24.             name : '黄小鱼',
  25.             subject : 'C++',
  26.             score :100
  27.         }]
  28.         console.log(datas.length);
  29.         var tbody =document.querySelector('tbody');
  30.         for(let i=0;i<datas.length;i++) {
  31.             // 创建行
  32.             var tr =document.createElement('tr');
  33.             tbody.appendChild(tr);
  34.             for(let j in datas[i]) {
  35.                 // 行里面创建单元格
  36.                 let td = document.createElement('td');
  37.                 // 把对象里面的属性值 给td
  38.                 td.innerHTML = datas[i][j];
  39.                 tr.appendChild(td);
  40.             }
  41.             let td = document.createElement('td');
  42.             td.innerHTML='<a href="javascript:;">删除</a>'
  43.             tr.appendChild(td);
  44.         }
  46.         var as = document.querySelectorAll('a');
  47.         for(let i=0;i<as.length;i++) {
  48.             as[i].onclick = function() {
  49.                 //点击a删除a所在的行，链接的父节点的父节点
  50.                 tbody.removeChild(this.parentNode.parentNode);
  51.             }
  52.         }
  53.     </script>
  54. </body>

三种创建元素的方式区别：

document.write()；

document.write(<div>111</div>)

直接将内容写入页面的内容流，文档流执行完毕，会导致页面重绘

innerHTML

将内容写入某个DOM结点，不会导致页面重绘，创建多个元素效率更高（不采用拼接字符串，而是数组形式拼接），结构稍微复杂

document.createElement()

创建多个元素效率稍低，但是结构清晰