js day09 数组的迭代方法 DOM 节点的操作(获取,创建,删除等)

一, 数组的迭代方法

1, forEach()

用来循环遍历数组，和for循环是一样的

// 语法：
//     数组.array.forEach(function(数组元素，下标，原数组){
//         // 循环遍历的代码块
//     });

arr.forEach(function (value, index, arr) {
    // console.log(value);
    // console.log(index);
    // console.log(arr);
})

2, some

针对数组的元素做一个检测，只有有一个元素结果为true,返回就是true

语法：

// 语法：
//     数组.array.some(function(数组元素，下标，原数组){
//         // 循环遍历的代码块
//     });

var arr = [2, 3, 4, 5];

var n = arr.some(function(value,index,arr){
    return value > 30;
})
console.log(n); // 结果是一个布尔值  

3, every

针对数组的元素做一个检测，只有有一个元素结果为false,返回就是false

// 语法：
//     数组.array.every(function(数组元素，下标，原数组){
//         // 循环遍历的代码块
//     });

var m = arr.every(function(value,index,arr){
    return value > 1;
})
console.log(m);

4, filter

针对数组做一个检测，返回的是满足条件的，以数组的形式返回

语法：

// 语法：
//     数组.array.filter(function(数组元素，下标，原数组){
//         // 循环遍历的代码块
//     });

var h = arr.filter(function(value,index,arr){
    return value > 3
})
console.log(h);

价格区间搜索 商品名搜索

// 利用新增数组方法操作数据
var data = [{
    id: 1,
    pname: '小米',
    price: 3999
}, {
    id: 2,
    pname: 'oppo',
    price: 999
}, {
    id: 3,
    pname: '荣耀',
    price: 1299
}, {
    id: 4,
    pname: '华为',
    price: 1999
},];

// 获取元素
var tbody = document.querySelector('tbody');
var searchPrice = document.querySelector('.search-price'); // 搜索
var start = document.querySelector('.start'); // 最低价格
var end = document.querySelector('.end'); //  最高价格
var searchPro = document.querySelector('.search-pro');
var product = document.querySelector('.product')

// 渲染数据
setDate(data)
function setDate(myData) {
    tbody.innerHTML = '';
    myData.forEach(function (value) { // value = {id:1,pname:'小米',price:2}
        tbody.innerHTML += '<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>'

    })
}
// 根据价格区间搜索商品
searchPrice.onclick = function () {
    var newDate = data.filter(function (value) {
        // value.price：数据价格 start.value：用户输入的最低价格  end.value：用户输入的最高价格 
        return value.price >= start.value && value.price <= end.value;
    })
    // 更新数据
    setDate(newDate)
}

// 根据商品名称查询商品
// some  
searchPro.onclick = function () {
    var arr = [];
    data.some(function (value) {
        if (value.pname === product.value) {
            arr.push(value);
        }
    })
    setDate(arr);
}

二, DOM

dom 是w3c组织制定的可以处理可扩展的标记语言的一种标准的编程接口

可以通过这些DOM接口，改变页面的结构或者内容以及样式，可以创建标签或者删除标签

DOM树

其实就是对节点进行操作

节点：页面中的标签，文本，视屏都可以称为节点，节点用Node表示

元素节点：用element表示元素节点

节点获取

节点名称：nodeName 返回值是一个大写的标签名

节点属性：nodeValue 如果不是设置属性，返回值一般是null

节点类型：nodeType (1 元素节点 2 属性节点 3 文本节点)

var pt = document.querySelector('input').getAttributeNode('name');

console.log(ul.nodeName); // UL  
console.log(ul.nodeType); //  1
console.log(ul.nodeValue); // null 

console.log(pt.nodeName); // INPUT  
console.log(pt.nodeType); // 1 
console.log(pt.nodeValue); // username  

父节点

语法：parentNode

可以获取元素的父节点（直接父节点），如果没有，返回null

// 获取父节点
var p = document.querySelector('p');
// 获取直接的父节点
// console.log(p.parentNode); // 常用 
// 获取有定位属性的父节点，如果没有，那就是body
console.log(p.offsetParent);

子节点

1、元素.childNodes 这个获取的是一个元素节点的集合（子元素节点，文本节点，属性节点）

 console.log(ul.childNodes[0].nodeType); // text

2、元素.chidlren 获取到的是子节点，只能获取自己的子元素

 console.log(ul.children[0].nodeType); // li 

但是childNodes是标准的，而chidlren是一个非标准的，但是所有浏览器已经支持了

重点掌握的是chidlren，两个都是有下标的

新浪菜单

window.onload = function () {

// 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 四个li 

// 循环添加事件
for (var i = 0; i < lis.length; i++) {
	// 鼠标经过事件
    lis[i].onmouseover = function () {
        this.children[1].style.display = 'block';
    }
	// 鼠标离开事件
    lis[i].onmouseout = function () {
        this.children[1].style.display = 'none';
    }
}

}

其他节点

获取第一个子元素节点

// 只获取第一个子节点
var ul = document.querySelector('ul');

// firstChild:获取的是元素的第一个元素节点
// 非标准的
console.log(ul.firstChild); // text

// firstElementChild:获取的是第一个子元素节点 
// IE:undefined  标准浏览器
console.log(ul.firstElementChild); // li
ul.firstElementChild.style.background = 'red'

// 兼容  可以获取到第一个子元素节点
var firstElement = ul.firstElementChild || ul.firstChild;
firstElement.style.background = 'red';
console.log(firstElement);

获取最后一个子元素节点

// 获取最后一个子元素节点
var ul = document.querySelector('ul');

// 非标准
console.log(ul.lastChild); // text
// 标准
console.log(ul.lastElementChild); // li 

// 兼容
var lastElement = ul.lastElementChild || ul.lastChild;

lastElement.style.background = 'blue';

获取下一个兄弟节点

// 获取下一个兄弟节点
var li = document.querySelector('li');

// 非标准的  元素节点
console.log(li.nextSibling); 
// 标准的 子元素节点
console.log(li.nextElementSibling);

// 兼容
var nextElement = li.nextElementSibling || li.nextSibling;

获取上一个兄弟节点

// 获取上一个兄弟节点
var li = document.querySelector('li');

// 非标准  元素节点
console.log(li.previousSibling);
// 标准的 子元素节点
console.log(li.previousElementSibling);

// 兼容
var prElement = li.previousElementSibling || li.previousSibling;

创建节点

语法：document.createElement(标签名) 标签名需要使用引号引起来

// 创建标签
var li = document.createElement('li');

// 推荐使用 给标签添加内容
li.innerHTML = '内容';
li.innerText = '文本内容';

添加标签

语法：父元素.appendChild(需要添加的元素)

需要添加的元素：因为这个元素如果是创建的，说明是一个变量，所以不需要加引号

 ul.appendChild(li);

添加多个元素

// 获取父元素
var ul = document.querySelector('ul');

for (var i = 0; i < 4; i++) {
    // 创建li元素
    var li = document.createElement('li');
    li.innerText = '内容';
    // 添加元素
    ul.appendChild(li);
    console.log(1);
}

留言板

/*   1、谁发生事件  button 
2、发生什么事件  onclick 单击 
3、干什么事  
    1、获取输入框的内容 
    2、创建li元素 
    3、把输入框的内容给创建出来的li  
    4、把li添加到ul   */

// 获取元素
var btn = document.querySelector('button'); 
var pt = document.querySelector('input');
var ul = document.querySelector('ul'); 

// 添加事件
btn.onclick = function(){
    // 获取输入框的内容
    var v1 = pt.value;

    // 创建li
    var li = document.createElement('li'); 

    // 赋值
    li.innerHTML = v1;

    // 把li给ul
   //  ul.appendChild(li);
  // 插入标签
    ul.insertBefore(li,ul.childNodes[0]);
    // 清空输入框内容
    pt.value = ''
}

插入节点

在某一个元素后面插入一个元素

语法：父元素.insertBefore(插入的元素,参考元素)

var ul = document.querySelector('ul');

// 创建li
var li = document.createElement('li');
// 添加元素
ul.appendChild(li)

// 插入元素 这是有参考标签的时候 
ul.insertBefore(li,ul.children[0]);
ul.insertBefore(li, ul.firstChild);

// 如果没有参考标签
ul.insertBefore(li,ul.childNodes[0]); 

删除节点

删除父元素的子元素

// 语法：父元素.removeChild(子元素)

// 获取元素
var btn = document.querySelector('button');
var ul = document.querySelector('ul');

// 添加事件
btn.onclick = function () {

    if (ul.children.length <= 0) {
        btn.disabled = true;
    } else {
        ul.removeChild(ul.children[0]);
    }
        }

留言板

/*   1、谁发生事件  button 
  2、发生什么事件  onclick 单击 
  3、干什么事  
      1、获取输入框的内容 
      2、创建li元素 
      3、把输入框的内容给创建出来的li  
      4、把li添加到ul   */

// 获取元素
var btn = document.querySelector('button');
var pt = document.querySelector('input');
var ul = document.querySelector('ul');

// 添加事件
btn.onclick = function () {
    if (pt.value == '') {
        alert('请输入内容，要不你就走人~~~~');
        return false;
    }
    // 获取输入框的内容
    var v1 = pt.value;

    // 创建li
    var li = document.createElement('li');
    // 创建a超链接
    var a = document.createElement('a');
    a.href = 'javascript:;';
    a.innerHTML = '删除';

    // 赋值
    li.innerHTML = v1;

    // 把超链接放到li标签里面
    li.appendChild(a);
    // 把li给ul
    // ul.appendChild(li);
    // 插入标签
    ul.insertBefore(li, ul.childNodes[0]);

    // 获取超链接 添加事件
    var as = document.querySelectorAll('a');
    // 添加事件
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            ul.removeChild(this.parentNode);
        }
    }

    // 清空输入框内容
    pt.value = '';
}

替换节点

语法：父元素.replaceChild(替换节点，被替换的节点)

<ul>
<p></p>
<li></li>
</ul>

<script>

// 替换节点
// 语法：父元素.replaceChild(替换节点，被替换的节点)

var ul = document.querySelector('ul');

var a = document.createElement('a');

ul.replaceChild(a,ul.children[1]);

克隆节点

语法：cloneNode()

如果没有参数，值复制元素，如果有参数true 可以复制标签和内容

var p = document.querySelector('p');

// document.body.appendChild(p.cloneNode()); 

document.body.appendChild(p.cloneNode(true)); 

属性操作

// 属性操作
var box = document.querySelector('div');

// 只能获取原有的属性
// console.log(box.id, box.title,box.abc);

// 获取自定义属性
console.log(box.getAttribute('abc'));
console.log(box.getAttribute('title'));

// 设置属性

box.setAttribute('title','我不是标题');
box.setAttribute('abc','我不是标题');

// 删除属性

box.removeAttribute('id');
box.removeAttribute('abc')