DOM(2)

排他思想

<body>
<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>
</body>

属性操作

获取属性值

<body>
<div id='demo' index='1'>努力都失败了</div>
<script>
    div = document.querySelector('div')
//第一种方法
    alert(div.id)
//第二种方法
		alert(div.getAttribute('id'))
		alert(div.getAttribute('index'))
</script>
</body>

上面两种方法的区别：第一种方法，element.属性用于获取内置内置属性值；第二种方法，element.getAttribute(‘属性’)用于获得自定义的属性。那还有一个核心问题：自定义属性和内置属性怎么判断？H5规定自定义属性以data-开头作为属性名并且赋值，例如：data-index。下面是H5新增的获取自定义属性的方法，只能获取data-开头的

<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
  var div = document.querySelector('div')
  //dataset是一个所有以data开头的自定义属性的集合
  console.log(div.dataset)
  alert(div.dataset.index)
  alert(div.dataset['index'])
  alert(div.dataset.listName)
  alert(div.dataset['listName'])
</script>
</body>

设置属性值

<body>
<div id='demo' index='1'>努力都失败了</div>
<script>
    div = document.querySelector('div')
//第一种方法
    div.id = 'test'
    alert(div.id)
//第二种方法
    div.setAttribute('index', 2)
    alert(div.getAttribute('index'))
    div.setAttribute('new', '3')
    alert(div.getAttribute('new'))
</script>
</body>

和获得属性值的两种方法一样，设置属性的第一种方法用于修改内置属性，第二种方法针对自定义的属性。除了这点，还有一个区别：在修改class属性上，第一种方法：div.className=’类名’，第二种方法：div.setAttribute(‘class’,’类名’)

移除属性

1	div.removeAttribute('属性名 ')

节点操作

节点操作用于利用节点层级关系获取元素。利用DOM提供的方法getElementById()等逻辑性不强，比较繁琐。所以我们需要利用父子兄弟节点关系获取元素

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

元素节点 nodeType为1，节点操作主要操作的是元素节点
属性节点 nodeType为2
文本节点 nodeType为3，换行、空格也是文本节点

父节点&子节点

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var li = document.querySelector('li')
    console.log(li.parentNode)
    var ul = document.querySelector('ul')
//childNodes所有的子节点，包含元素节点、文本节点等
    var list = ul.childNodes
    console.log(list)
    alert(list[0].nodeType) //3
    alert(list[1].nodeType)//1
</script>
</body>

childNodes得到的是所有的子节点，如果我们只要元素节点。我们要用children，这可以返回所有的子元素节点，其余节点不返回

1	console.log(ul.children)

//返回第一个子节点，不管是文本节点还是元素节点
console.log(ul.firstChild)
//返回最后一个子节点
console.log(ul.lastChild)
//返回第一个子元素节点，没有返回null
console.log(ul.firstElementChild)
//返回最后一个子元素节点，没有返回null
console.log(ul.lastElementChild)

后两种方法有兼容性问题，在实际开发中，我们可以用索引访问children

兄弟节点

<body>
<div>我是div</div>
<span>我是span</span>
<script>
    var div = document.querySelector('div')
    //下一个兄弟节点，包括元素节点、文本节点
    console.log(div.nextSibling)
		//上一个兄弟节点
		console.log(div.previousSibling)
		 //下一个兄弟元素节点，没有返回null
     console.log(div.nextElementSibling)
     //上一个兄弟元素节点
     console.log(div.previousElementSibling)
</script>
</body>

上面代码的后两种api也是有兼容性问题的，PS：IE，一生之敌。解决办法：只能自己封装一个函数

创建、添加节点

<body>
<ul>
    <li>
        世界它带来过太多的颠簸
    </li>
</ul>
<script>
  //创建节点
    var li = document.createElement('li')
    var ul = document.querySelector('ul')
   //添加节点
    ul.appendChild(li)
</script>
</body>

appendchild是将一个节点添加到指定父节点的子节点列表末尾，那如何添加到前面呢？insertBefore

1 2	node.insertBefore(child,指定元素) ul.insertBefore(li, ul.children[0])

删除节点

<body>
<button>按钮</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    var ul = document.querySelector('ul')
    var btn = document.querySelector('button')
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true
        } else {
            ul.removeChild(ul.children[0])
        }
    }
</script>
</body>

复制节点

node.cloneNode()方法返回调用该方法的节点的一个副本。

注意：1、如果括号参数为空或者为false，则是浅拷贝，即只复制标签不复制里面的内容

2、如果括号参数为true，则是深拷贝，即复制表情且复制里面的内容

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul')
    var lili = ul.children[0].cloneNode()
    //var lili = ul.children[0].cloneNode(true)
    ul.appendChild(lili)
</script>
</body>