web API -- 元素、表单、样式、自定义操作属性以及排他思想，事件，节点知识

刻意去找的东西，往往是找不到的，天下万物的来和去，都有它的时间

元素属性操作

• 获取元素：元素.属性名
• 设置元素：元素.属性名 = 值
• 常见的属性：href，title，id，src，className，innerText，innerHTML

  <img src="images/1.gif" alt="" id='img1'>
  <input type="button" value='点击' id='btn'>
  <a href="#">链接</a>
  <div class='ming'>123</div>
  <script>
  	var img = document.querySelector('img')
  	var btn = document.getElementById('btn')
  	var link = document.querySelector('a')
  	var div = document.querySelector('div')
  	btn.onclick = function () {
  		img.src = 'images/2.gif'
  		img.id = 'pic'
  		link.href = 'http://www.baidu.com'
  		div.className = 'box'
  	}
  </script>
  

• 总结
  • 操作元素实质就是改变属性，元素的属性发生变化，元素也会变化
  • 元素的属性既可以获取，也可以设置
  • 类名属性的获取和修改需要写成 className

   var link = document.getElementById('link')
   console.log(link.href)
   console.log(link.title)
   var pic = document.getElementById('pic')
   console.log(pic.src)
   console.log(pic.className)
  

innerText和innerHTML

• 相同点：都指的是标签中的内容 (双标签)
• 区别
  • innerText：只会识别文本
  • innerHTML：除了能够识别文本，还可以识别标签

<div id="box"><h2>我是div中的标题</h2></div>
<script>
  // 获取div元素
  var div = document.getElementById('box')
	// 【获取】
	// ① 通过innerText获取,仅仅包含文本
	console.log(div.innerText)
	// ② 通过innerHTML获取，若有子标签时，会包含文本和子标签
	console.log(div.innerHTML)

	// 【设置】
	// ① 通过innerText设置,若设置中包含了子标签，该标签不会被渲染而是当做普通文本显示
	div.innerText = '<a href="#">我是div中的超链接</a>'
	// ② 通过innerHTML设置,若设置中包含了子标签，该标签会被渲染显示
	div.innerHTML= '<a href="#">我是div中的超链接</a>'
</script>

表单操作属性

• 获取和设置表单元素的属性
  • value：用于大部分表单元素的内容获取
  • type：可以获取input标签的类型
  • disabled：禁用属性
    • 获取：元素.disabled ===> 返回布尔值 (true禁用 false不禁用)
    • 设置：元素.disabled = 布尔值
  • checked：复选框选中属性
    • 获取：元素.checked ===> 返回布尔值 (true选中 false不选中)
    • 设置：元素.checked = 布尔值
  • selected：下拉菜单选中属性
    • 获取：元素.selected ===> 返回布尔值 (true选中 false不选中)
    • 设置：元素.selected = 布尔值

自定义属性

• 自定义属性1
  • 获取属性：元素.getAttribute()
  • 设置属性：元素.setAttribute()
  • 移除属性：元素.removeAttribute()

  <img src="a.jpg" bigSrc="b.jpg">
  <script>
    // 自定义属性，非标准属性，自己添加的属性
  	var img = document.querySelector('img')
  	console.log( img.src )
  	console.log( img.bigSrc )
  	img.index = 0
  	console.log( img.index )
  	console.dir(img)
  
  	// 标签自定义属性：不可以用【元素.属性】的方式去访问或者去设置
  	console.log( img.getAttribute('src') )
  	img.setAttribute('src', 'c.jpg')
  	img.removeAttribute('src')
  </script>
  

• 自定义属性2
  • 获取属性：元素.自定义属性名
  • 设置属性：元素.自定义属性名 = 值

  <ul>
    <li>a</li>
  	<li>b</li>
  	<li>c</li>
  </ul>
  <script>
  	var lis = document.querySelectorAll('li')
  	for (var i = 0; i < lis.length; i++) {
  		// lis[i].index = i;
    	lis[i].setAttribute('data-index', i)
    	lis[i].onclick = function () {
    		console.log(this.getAttribute('data-index'))
    	}
  	}
  </script>
  

样式属性操作

• style属性：元素.style.样式属性 = 值

  var box = document.getElementById('box')
  box.style.backgroundColor = 'pink' 
  

• className类名

  var box = document.getElementById('box')
  box.className = 'demo'
  
  // 如果有很多类的话，以上样式会覆盖
  

• classList属性
  • 添加：元素.classList.add('类名称')
  • 删除：元素.classList.remove('类名称')
  • 切换：元素.classList.toggle('类名称')

排他思想

• 在修改当前元素之前，我们把所有的元素样式调整统一(恢复原样)

  <input type="button" value="点击">
  <input type="button" value="点击">
  <input type="button" value="点击">
  <input type="button" value="点击">
  <input type="button" value="点击">
  <input type="button" value="点击">
  <script>
    // 点击按钮,点谁把谁的背景改成颜色
    var btns = document.querySelectorAll('input')
  	// 遍历元素添加事件
  	for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
         for (var j = 0; j < btns.length; j++) {
            btns[j].style.background = ''
         }
         this.style.background = 'green'
      }
    }
  </script>
  

事件

• 点击事件：onclick
• 鼠标进入事件：onmouseenter
• 鼠标离开事件：onmouseleave
• 失去焦点：onblur
• 获得焦点：onfocus
• 发生改变：onchange
• 输入事件：oninput

<div id="moon">月亮</div>
<script>
	var moon = document.getElementById('moon')
	moon.onmouseenter = function () {
		moon.style.backgroundColor = 'pink'
		moon.style.color = '#fff'
		moon.style.fintSize = 20
		moon.style.textAlign = 'center'
	}
	moon.onmouseleave = function () {
		moon.style = 'none'
	}
</script>

节点

• 节点关系
  • 父节点：parentNode 返回父元素节点
  • 子节点：children 返回子元素节点
  • 下一个兄弟节点：nextElementSibling 只会获取下一个元素节点
  • 上一个兄弟节点：previousElementSibling
  • 第一个节点：firstElementChild
  • 最后一个子节点：lastElementChild
• 节点属性
  • 节点类型：nodeType
  • 节点名称：nodeName
  • 节点值：nodeValue