一 查询节点,获取页面元素
getElementByld() ,通过id获取元素
getElmentsBytTagName(),通过标签名获取节点列表
getElementsByClassName(),通过类名获取节点列表
getElementsByName(),通过名称获取列表
querySelector(), 通过css选择器获取节点
querySelectorAll(),通过css选择器获取节点列表
代码如下:
// Element 多个节点 BY通过 tag 标签 name 名字
// getElementsByTagName 通过标签名获取多个节点
// var dom=document.getElementById('dom')
// console.log(dom,dom.innerText)
// getElementsByClassName
// var pS=document.getElementsByTagName('P')
// console.log(pS,pS[0].innerText)
// var sel=document.getElementsByClassName('sel')
// console.log(sel,sel[1].innerText)
// var fav=document.getElementsByName('fav')
// fav[1].checked=true;
// console.log(fav)
// querySelector 通过css选择器 去查询节点
// query 查询 selector 选择器
// var p=document.querySelector('div p')
// console.log(p,p.innerText)
// 选择节点 非常方便 填写css选择器
// var p2=document.querySelector('div p:last-of-type')
// console.log(p2,p2.innerText)
// queryselectorAll 通过css选择器来获取节点列表
// var ps=document.querySelectorAll('div p')
// ps.forEach(function (item){
// console.log(item,item.innerText)
// } )
二、 遍历节点
使用for循环来遍历、
转换为数组Array.from()forEach
转换为数组 for of
代码如下:
// 节点遍历
// var ps=document.getElementsByName('p')
// for(var i=0;i<ps.length;i++){
// console.log(ps[i],ps[i].innerText)
// }
// 转化为数组
// var arr=Array.from(ps)
// arr.forEach(function(elem){
// console.log(elem,elem.innerText)
// })
三、改变层内容
innerText:获取改变文本内容
innerHTML: 获取改变html内容
代码如下
// 修改层
html
// <!-- <button type="button" οnclick="changeIt()">更改层内容</button>
// <div>
// 我喜欢王者
// </div>
js
// function changeIt(){
// var div= document.querySelector('div');
// // div.innerText='我还是喜欢lol'
// div.innerHTML='我还是喜欢lol'
// }
四、获取表单值
value 获取改变表单值
checked 修改
checkbox 是否勾选
代码如下:
<input type="text" name="season" value="男">
<input type="text" name="season" value="女">
<input type="text" name="season" value="男人">
<input type="text" name="season" value="女人"><br>
<input type="button" value="显示input内容" οnclick="show()">
<input type="button" value="显示season内容" οnclick="show(
// function show(){
// var str=''
// // 获取所有input
// var inp=document.querySelectorAll('input')
// // 遍历inp 把value 追加到str
// inp.forEach(function (item) {
// str+=item.value+'<br>'
// } )
// tp.innerHTML=str
// }
// function show(){
// var str=''
// var seasons= document.getElementsByName('season')
// seasons.forEach( function (item) {
// str+=item.value+'<br>'
// })
// tp.innerHTML=str
// }
五、 通过style修改样式
修改宽度样式:elem.style.width=400px
修改字体大小:elem.style.fontsize=32px
也可以获取行内样式:elem.style.width
代码如下:
// var links = document.querySelectorAll('.link')
// links.forEach(function(item) {
// console.log(item);
// var art = item.querySelector('.art')
// item.onmouseover = function() {
// art? art.style.display = 'block':'' ;
// }
// item.onmouseout = function() {
// art? art.style.display = 'none':'';
// }
// })
六 通过classlist 修改类名 修改样式
classlist.toggle:切换类名
classlist.add:添加类名
classlist.remove:删除类名
classlist.contains:检查是否包含
代码如下:
// function change() {
// var div = document.getElementById('a1');
// div.classList.toggle('hide');
// alert(div.style.width)
// classList.toggle 切换类名
// classList.add 添加类名
// classlist.remove 移除类名
// classlist.contains 检查是否包含
// }