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>

全文手打，转载请注明出处!  

全文手打，转载请注明出处！

全文手打，转载请注明出处！