DOM基础

孩子节点-children

<ul id="ul1">
    <li></li>
    <li></li>
</ul>
var oUl = document.getElementById("ul1");
console.log(oUl.children.length); //2
for (var i = 0; i < oUl.children.length; i++) {
    oUl.children[i].style.background = 'red';
}

父亲节点-parentNode

<ul id="ul1">
    <li>abc<a href="javascript:;">隐藏</a></li>
    <li>def<a href="javascript:;">隐藏</a></li>
</ul>

var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
    aA[i].onclick = function(){
        this.parentNode.style.display = 'none';
    };
}

第一个直接孩子-firstChild-firstElementChild

<ul id="ul1">
    <li>1</li>
    <li>2</li>
</ul>

var oUl = document.getElementById("ul1");
if (oUl.firstElementChild) { //高级浏览器使用firstElementChild
    oUl.firstElementChild.style.background = 'red';
} else {
    oUl.firstChild.style.background = 'red';
}

注：效果是<li>1</li>变红

三种操作元素属性方式

<input id="txt" type="text" />
<button onclick="fillText()">填写文字</button>

var oTxt = document.getElementById("txt");
oTxt.value = 'abc'; //方式一
oTxt['value'] = 'def'; //方式二
oTxt.setAttribute('value', 'ghi'); //方式三
console.log(oTxt.getAttribute('value')); //ghi
oTxt.removeAttribute('value');

使用className选取元素

<ul id="ul1">
    <li class="box"></li>
    <li></li>
    <li class="box"></li>
</ul>
function getByClassName(oParent, className1){
    var aEles = oParent.getElementsByTagName('*');
    var aRes = [];
    for (var i = 0; i < aEles.length; i++) {
        if (aEles[i].className == className1) {
            aRes.push(aEles[i]);
        }
    }
    return aRes;
}

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aBox = getByClassName(oUl, 'box');
    console.log(aBox.length); //2
};

创建元素

<input type="text" id="txt"/><button onclick="fillText()">添加</button>
<ul id="ul1"></ul>

function fillText() {
    var oTxt = document.getElementById("txt");
    var oUl = document.getElementById("ul1");
    var oLi = document.createElement('li');
    oLi.innerText = oTxt.value;
    oUl.appendChild(oLi); //放在末尾
    
    var aLi = document.getElementsByTagName('li');
    if (aLi.length == 0) {
        oUl.appendChild(oLi);   
    } else {
        oUl.insertBefore(oLi, aLi[0]); //放在开头
    }
}

删除元素

<ul id="ul1">
    <li>123<a href="javascript:;">删除</a></li>
    <li>145<a href="javascript:;">删除</a></li>
</ul>

var oUl = document.getElementById("ul1");
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
    aA[i].onclick = function() {
        oUl.removeChild(this.parentNode);
    };
}