1- 排他思想
就是先让所有的内容都置为初始值，让你想要选中的内容变成你设置的内容！！！
例：
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
</div>
<script>
var btns = document.querySelectorAll("button")
console.log(btns)
for(var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 1.让所有的按钮都变成黑色
for(var j = 0; j < btns.length; j++) {
btns[j].style.color = "black"
}
// console.log(this.innerHTML)
// 2 让点击的按钮颜色变成red
this.style.color = "red"
}
}
</script>
2-百度换肤
例：
<img src="img/01.png" alt="">
<img src="img/02.png" alt="">
<script>
document.body.style.background = "url(img/01.png) no-repeat"
var an2 = document.querySelectorAll("img")
for( var i = 0 ; i < an2.length; i++){
an2[i].onclick = function( ){
document.body.style.background = " url("+this.src+") no-repeat"
}
}
</script>
3-隔空变色
例：
<body>
<table width= " 200px" border="1">
<tr class="tdline">
<td>1</td>
</tr>
<tr class="tdline">
<td>2</td>
</tr>
<tr class="tdline">
<td>3</td>
</tr>
<tr class="tdline">
<td>4</td>
</tr>
<tr class="tdline">
<td>5</td>
</tr>
<tr class="tdline">
<td>6</td>
</tr>
<tr class="tdline">
<td>7</td>
</tr>
</table>
<script>
var tr =document.querySelectorAll(".tdline")
for(var i = 0 ; i < tr.length ; i++){
if(i % 2 == 0){
tr[i].style.background = "red"
}else{}
}
</script>
</body>
4-移入与移出
<body>
<table width= " 200px" border="1">
<tr class="tdline">
<td>1</td>
</tr>
<tr class="tdline">
<td>2</td>
</tr>
<tr class="tdline">
<td>3</td>
</tr>
<tr class="tdline">
<td>4</td>
</tr>
<tr class="tdline">
<td>5</td>
</tr>
<tr class="tdline">
<td>6</td>
</tr>
<tr class="tdline">
<td>7</td>
</tr>
</table>
<script>
var tr =document.querySelectorAll(".tdline")
for(var i = 0 ; i < tr.length ; i++){
tr[i].onmouseover =function(){
this.style.background = "red"
}
tr[i].onmouseout = function(){
this.style.background = "#fff"
}
}
</script>
</body>
5-Attribute: 属性
<img src="" alt="">
<script>
var img = document.querySelector("img")
img.src = "http://www.baidu.com"
1.getAttribute 获取属性值
console.log(img.getAttribute("src"))
2. setAttribute设置属性的值
img.setAttribute("data-src", "https://www.baidu.com")
3.移除属性 removeAttribute
img.removeAttribute("data-src")
自定义属性
在标签上写上 data-* = ""就可以添加属性
<img data-type="jpeg" src="" alt="">
节点
网页中所有的内容都是节点，在DOM中,使用node进行表示！！！都是可以通过js进行访问
// 一个node包含了三个属性nodeType、nodeName、nodeValue
nodeType 表示节点类型
nodeName 表示节点名字
nodeValue 表示节点Value值
父节点
通过 parentNode 找父节点
<div>
<ul>
<li class="myli">123</li>
<li></li>
<li></li>
</ul>
</div>
<script>
var li = document.querySelector(".myli")
console.log(li.parentNode)
</script>
子节点
<ul>
<li>123123</li>
<li></li>
<li></li>
<li></li>
<li>11111</li></ul>
<script>
var ul = document.querySelector("ul")
// 如果使用childNodes那么换行和空格也算是子节点 ""
var liList= ul.childNodes
console.log(liList)
// children 只打印li元素，开发中经常用！！！
console.log(ul.children)
// firstChild lastChild 识别文本的！！！
console.log(ul.firstChild) 第一个
console.log(ul.lastChild) 最后一个
</script>
兄弟节点
body>
<ul>
<li>1</li>
<li class="myli">2</li><li>3</li>
<li>4</li>
</ul>
<script>
var myli = document.querySelector(".myli")
// next 下一个 这两个接口识别了文本
console.log(myli.nextSibling)
console.log(myli.previousSibling) // 上一个 previous
// 不识别文本
console.log(myli.nextElementSibling)
console.log(myli.previousElementSibling)
</script>
创建添加节点
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul")
// 1、创建就是新建一个节点
// create创建 element 节点
var li = document.createElement("li")
li.innerHTML = "123"
// 2.添加节点
// append 追加 child 孩子
ul.appendChild(li)
// 3.添加到最前面的位置
// insert 插入 before 在...之前
ul.insertBefore(li, ul.children[0])
</script>
例：留言板
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
</div>
<script>
var text = document.querySelector("textarea");
var btn = document.querySelector("button")
var ul = document.querySelector("ul")
btn.onclick = function() {
// 1.判断text文字是否有文字，如果有，则进行发布，如果没有，提示请输入内容
if(text !== "") {
// 1)增加一个li元素，将text文本中内容放到li中，
// 2).追加到ul中去
var li = document.createElement("li")
li.innerHTML = text.value
ul.appendChild(li)
text.value = ""
}else {
alert("发布的内容不能为空")
}
}
</script>
