以Python角度学习Javascript(二)之DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找(ID, class等)

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合  //比如a标签啊，p标签啊等

document.getElementsByClassName("current")[0].setAttribute("class","");
document.getElementById("course").setAttribute("class","current");

2、间接查找（父节点等）

parentNode          // 父节点

<div >            
    <div ></div>
</div>
<script type="text/javascript">
    console.log(document.getElementById('test').parentNode);
</script>

结果：
<div >....< /div>

View Code

childNodes          // 所有子节点

    <div>
        123
        <div class="c1">asdf</div>
        <div class="c1" >
            <p>asdf</p>
            <div name="n1">
                <span>asd</span>
            </div>
            <div name="n1">
                <a>1</a>
                <a>11111</a>
            </div>
        </div>
        <div class="c1">asdf</div>
    </div>
------------------------------------------------
<script type="text/javascript">
var elm = document.getElementById('i1');
var p1_text = elm.parentNode;
var p1_notext = elm.parentElement;

//console.log(p1_text);
//console.log(p1_notext);

var p1_child_text = p1_text.childNodes;//获取所有子节点
for (var i=0; i<p1_child_text.length;){
    console.log(p1_child_text[i])
}

// for (var i=0;i<p1_child_text.length;i++) {
//     cur = p1_child_text[i]
//     if (cur.nodeType == 1){  //如果是文本的话，比如div标签里面的123的话，cur.nodeType == 3,如果是标签的话，cur.nodeType ==1
//         console.log(p1_child_text[i])
//     }
// }

var p1_child_notext = p1_notext.children;
for(var i=0;i<p1_child_notext.length;i++){
    console.log(p1_child_notext[i])
}
</script>

详解样例