Apprenez à partager des informations vidéo javascript tout en parlant et en riant

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，通过本教程我们将会来深入学习JavaScript的使用。

视频播放地址：http://www.php.cn/course/203.html

本视频学习时难点在于操作对象和DOM操作：

一、document.getElementById()    根据Id获取元素节点

 <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //弹出    我是第一个P
        }

二、document.getElementsByName() 根据name获取元素节点

  <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
        <input type="text" value="请输入值" name="userName" />
        <input type="button" value="确定" onclick="fun1()">
    </div>
        
        function fun1() {
            var username = document.getElementsByName("userName")[0].value;
            alert(username);    //输出userName里输入的值
        }

三、document.getElementsByTagName() 根据HTML标签名获取元素节点，注意getElements***的选择器返回的是一个NodeList对象，能根据索引号选择其中1个，可以遍历输出。

<div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始
        }    
    window.onload = function () {
            var arr = document.getElementsByTagName("p");
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i].innerHTML);
            }
        }
    window.onload = function () {
            var node = document.getElementById("div1");         var node1 = document.getElementsByTagName("p")[1];    //从获取到的元素再获取
            alert(node1.innerHTML);
    }

四、document.getElementsByClassName() 根据class获取元素节点

<div id="div1">
        <p id="p1" class="class1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }

五、javascript中的CSS选择器

  document.querySelector()    //根据CSS选择器的规则，返回第一个匹配到的元素
    document.querySelectorAll()    //根据CSS选择器的规则，返回所有匹配到的元素    <div id="div1">
        <p id="p1" class="class1">
            我是第一个P</p>
        <p id="p2" class="class2">
            我是第二个P</p>
    </div>
        window.onload = function () {
            var node = document.querySelector("#div1 > p");    
            alert(node.innerHTML);                //输出  我是第一个P
            var node1 = document.querySelector(".class2");
            alert(node1.innerHTML);                //输出  我是第二个P
            var nodelist = document.querySelectorAll("p");
            alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML);    //输出  我是第一个P - 我是第二个P
        }

六、文档结构和遍历
    (1)作为节点数的文档
    1、parentNode    获取该节点的父节点    
    2、childNodes    获取该节点的子节点数组
    3、firstChild    获取该节点的第一个子节点
    4、lastChild    获取该节点的最后一个子节点
    5、nextSibling    获取该节点的下一个兄弟元素
    6、previoursSibling    获取该节点的上一个兄弟元素
    7、nodeType    节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
    8、nodeVlue    Text节点或Comment节点的文本内容
    9、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示

    注意，以上6个方法连元素节点也算一个节点。

   

           

                   我是第一个P

           

                   我是第二个P

       

        window.onload = function () {            var node1 = document.querySelector(".class2");            alert(node1.parentNode.innerHTML); //输出  

我是第一个P

我是第二个P

           var nodelist = document.getElementById("div1");            var arr = nodelist.childNodes;            alert(arr[1].innerHTML + " - " + arr[3].innerHTML); //输出    我是第一个P - 我是第二个P 为什么是1，3呢？因为本方法文本节点也会获取，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是说0,2,4是文本节点        }    

           文本1            

               我是第一个P

           文本2            

               我是第二个P

           文本3        

window.onload = function () { //Sortie en séquence, texte 1, je suis le premier P, texte 2, je suis le deuxième P, texte 3         var node = document.getElementById("div1"); pour (var i = 0; i

(2) Document sous forme d'arborescence d'éléments
1. firstElementChild Le premier nœud d'élément enfant
2. lastElementChild Le dernier nœud d'élément enfant
3. nextElementSibling Le nœud d'élément frère suivant
4. previousElementSibling Nœud d'élément frère précédent
5. childElementCount Nombre de nœuds d'élément enfant
Notez que ces 5 nœuds de texte de méthode ne sont pas inclus

Cet instructeur vidéo est un jeune professeur de site Web PHP chinois Ji Wei a donné la conférence. La conférence était vivante et intéressante, et il n'a pas perdu de temps ni sur la conférence ni sur la conférence, prenant pleinement en compte les sentiments des étudiants. Les cours de base vont du simple au avancé, et les cours pratiques vont du simple au complexe. Le but de son enseignement est d'apprendre ce que l'on veut apprendre en jouant. Apprendre, c'est la même chose que jouer. Ouvrages représentatifs : « Apprenez PHP du bout des doigts », etc. Vous pouvez l'étudier et l'étudier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!