DOM节点（二）
全文手打，转载请注明出处
一）节点属性操作
①获取属性值
★DOM节点.属性名 //不能获取用户自定义的属性
★DOM节点.getAttribute(属性名) //万能
②设计属性值
★DOM节点.属性名 = 属性值
★DOM节点.setAttribute(属性名,属性值)
③删除属性值
★DOM节点.属性名 = ' ' //空字符串
★DOM节点.removeAttribute(属性名)
<button id = "btn">切换图片</button> <img src = "images/bg1.jpg" data-src = "images/bg2.jpg" alt = "图片" /> //有data-是用户自定义属性 <img data-src = "images/bg2.jpg" alt = "图片" /> //没有src图片出不来 <script> //①获取属性值 // ★DOM节点.属性名 //不能获取用户自定义的属性 // ★DOM节点.getAttribute(属性名) //万能，1次只能拿1个属性 //获取图片 var img = document.getElementsByTagName('img'); console.log(img[0].src); //获取的是图片的完整路径，拿到浏览器中可以打开 console.log(img[0].alt); console.log(img[0].data-src); //用户自定义属性报错 console.log(img[0].data); //undefined console.log(img[0].getAttribute(src)); console.log(img[0].getAttribute(data-src)); //可以 //②设计属性值 // ★DOM节点.属性名 = 属性值 // ★DOM节点.setAttribute(属性名,属性值) img[1].src = 'images/bg1.jpg'; img[1].data-src = 'images/bg1.jpg'; //报错 document.getElementsById('btn').onclick = function(){ alert(); //测试好用不 var url = img[0].getAttribute('data-src'); img[0].setAttribute('src',url) } //③删除属性值 // ★DOM节点.属性名 = ' ' //空字符串 // ★DOM节点.removeAttribute(属性名) img[1].src = ' ' img[1].removeAttribute('src') </script>
二）节点文本操作
①获取文本内容
★节点.innerHTML //获取节点下的所有内容，包括标签
★节点.innerText //获取节点下的文本内容，过滤掉标签
★节点.value //获取input输入框等表单控件的内容
★节点.getAttribute("value") //value是表单输入框的属性，可用getAttribute获得value值
②设计文本内容
★节点.innerHTML = "文本内容" //会翻译html标签
★节点.innerText= "文本内容" //不会翻译html标签
★节点.value = 值 //获取input输入框等表单控件的内容
★节点.setAttribute("value",值) //value是表单输入框的属性，可用setAttribute设置value值
③删除文本内容
★节点.innerHTML = " "
★节点.innerText= " "
★节点.value = " "
★节点.removeAttribute("value")
<button id = "btn"><span>这是</span>切换图片</button>
<img src = "images/bg1.jpg" data-src = "images/bg2.jpg" alt = "图片" />
<img data-src = "images/bg2.jpg" alt = "图片" />
<form>
<input type = "text" name = "txt" value = "这是表单文本框的内容"><br>
<input type = "radio" name = "sex" value = "1">男
<input type = "radio" name = "sex" value = "2">女<br>
<input type = "checkbox" name = "hobby" value = "睡觉觉">睡觉觉
<input type = "checkbox" name = "hobby" value = "恰饭饭">恰饭饭
<input type = "checkbox" name = "hobby" value = "游戏戏">游戏戏<br>
<input type = "button" id = "ok" value = "提交">
</form>
<script>
// ①获取文本内容
// ★节点.innerHTML //获取节点下的所有内容，包括标签（必须双标签）<></>
console.log(document.getElementById('btn').innerHTML); //返回button中间的所有<span>这是</span>切换图片
// ★节点.innerText //获取节点下的文本内容，过滤掉标签
console.log(document.getElementById('btn').innerText); //文本内容，这是切换图片
// ★节点.value //获取input输入框等表单控件的内容
console.log(document.getElementByName('txt')[0].value); //表单
console.log(document.forms[0].txt.value); //把input放到form标签里，第二种写法
console.log(document.querySelector('input').value); //第三种写法
document.forms[0].txt.onblur = function (){ //onblur:事件（失焦时触发该事件）注册登录时，失焦用于检测合法不
console.log(document.forms[0].txt.value);
console.log(this.value); //简写，this代表当前的DOM对象
if(this.value == 'aaa'){
alert('登陆成功！');
location.href = 'https://baidu.com' //location.href用于动态跳转，a标签是静态跳转
} else{
alert('账号不正确！');
}
}
// ★节点.getAttribute("value") //value是表单输入框的属性，可用getAttribute获得value值
console.log(document.forms[0].txt.getAttribute("value"); //只能获取标签属性的值，不能获取标签的文本内容
// ②设计文本内容
// ★节点.innerHTML = "文本内容" //会翻译html标签
document.getElementById('btn').innerHTML = "aaa"; //修改为aaa
document.getElementById('btn').innerHTML = "这是一个<strong>aaa</strong>"; //修改为这是一个粗aaa粗，会自动解析标签
// ★节点.innerText= "文本内容" //不会翻译html标签
document.getElementById('btn').innerTest = "aaa"; //只是文本时，和上面用法相同
document.getElementById('btn').innerTest = "这是一个<strong>aaa</strong>"; //不会自动解析标签
// ★节点.value = 值 //获取input输入框等表单控件的内容
document.forms[0].sex.value = 1; //默认radio选中1
document.forms[0].hobby.value = '恰饭饭'; //不能通过value设置默认checkbox选项
document.forms[0].hobby[1].checked = true; //第2项被选中
document.forms[0].hobby[1].checked = false; //第2项取消被选中
document.querySelector('#ok').onclick = function() { //单击”提交“按钮获取所有复选框被选中的内容
var chks = document.forms[0].hobby; //获取所有复选框DOM
var arr = [];
for (var i in chks) {
if(chks[i].checked){ //如果被选中
arr.push(chks[i].value); //获取值
}
}
}
// ★节点.setAttribute("value",值) //value是表单输入框的属性，可用setAttribute设置value值
document.forms[0].hobby[0].setAttribute('checked',true);
document.forms[0].hobby[0].setAttribute('checked',haha); //'checked'后面给什么值都选中
document.forms[0].hobby[0].setAttribute('value','1');
// ③删除文本内容
// ★节点.innerHTML = " "
document.getElementById('btn').innerHTML = " "
// ★节点.innerText= " "
document.getElementById('btn').innerText= " "
// ★节点.value = " "
document.forms[0].hobby[0].value = " ";
// ★节点.removeAttribute("value")
document.forms[0].hobby[0].removeAttribute('value');
</script>
三）DOM节点样式操作
①获取样式class
★节点.className //获取节点下的所有class
★节点.getAttribute("class") //获取节点下的所有class
②设计样式class
★节点.className = 值
★节点.setAttribute("class",值)
③其他样式class
★节点.classList.add(value) //为元素添加指定的类
★节点.classList.contains(value) //判断元素是否含有指定的类，如果存在返回true
★节点.classList.remove(value) //删除指定的类
★节点.classList.toggle(value) //有就删除，没有就添加指定的类
<style> .p-style{ color:red; background-color:gray; font-size:30px; font-weight:bold; } .demo{ border:1px solid #00f } </style> <p class = "test p-style">测试文本</p> <p class = "test">测试文本</p> <script> //①获取样式class // ★节点.className //获取节点下的所有class console.log(document.getElementsByClassName('test')[0].className); // ★节点.getAttribute("class") //获取节点下的所有class console.log(document.querySelector('.test').getAttribute.("class")); //②设计样式class // ★节点.className = 值 document.getElementsByTagName('p')[1].className = 'p-style'; document.getElementsByClassName('test')[1].className = 'p-style'; // ★节点.setAttribute("class",值) document.getElementsByTagName('p')[1].setAttribute("class","p-style"); document.getElementsByTagName('p')[1].setAttribute("class","demo test p-style"); //③其他样式class // ★节点.classList.add(value) //为元素添加指定的类 document.getElementsByTagName('p')[1].classList.add("aaa"); // ★节点.classList.contains(value) //判断元素是否含有指定的类，如果存在返回true // var hs = document.getElementsByTagName('p')[1]; if(document.getElementsByTagName('p')[1].classList.contains("p-style")){ document.getElementsByTagName('p')[1].classList.remove("p-style") //有就删除 } else{ document.getElementsByTagName('p')[1].classList.add("p-style"); //无就添加 } // ★节点.classList.remove(value) //删除指定的类 // ★节点.classList.toggle(value) //有就删除，没有就添加指定的类 var dom = document.getElementsByTagName('p')[1]; dom.onclick = function(){ dom.classList.toggle("p-style"); //切换样式 } </script>
四）DOM操作内联样式
①获取样式class
★节点.style.样式属性名 //获取某个具体的内联样式
★节点.style.cssText //获取某个节点所有的内联样式，返回字符串
②设计样式class
★节点.style.样式属性名 = 属性值 //设置某个具体的内联样式
★节点.style.cssText = 属性值或属性值列表 //设置某个节点所有的内联样式
<p style = "color:red;">测试文本1</p> <p style = "color:blue;font-size:28px;">测试文本2</p> <script> var pDom = document.querySelectorAll('p'); //①获取样式class // ★节点.style.样式属性名 //获取某个具体的内联样式 console.log(pDom[0].style.color); //red console.log(pDom[1].style.fontSize); //28px // ★节点.style.cssText //获取某个节点所有的内联样式，返回字符串 console.log(pDom[0].style.cssText); //color:red; console.log(pDom[1].style.cssText); //color:blue;font-size:28px; //将cssText返回的字符串转换为对象 var str = pDom[1].style.cssText,arr = [],cssObj = {}; arr = str.split(';'); //以;进行拆分，变成数组 for(var i in arr){ var newArr = null; newArr = arr[i].split(': '); //以: 进行拆分 cssObj[newArr[0]] = newArr[1]; //数组转化为对象 } //②设计样式class // ★节点.style.样式属性名 = 属性值 //设置某个具体的内联样式 pDom[0].style.color = 'pink'; pDom[1].style.fontSize = '10px'; // ★节点.style.cssText = 属性值或属性值列表 //设置某个节点所有的内联样式 document.querySelector('div').style.cssText = 'color:red;background-color:blue'; </script>
全文手打，转载请注明出处!
全文手打，转载请注明出处！
全文手打，转载请注明出处！
