初识JavaScript——简单了解

Hello world -JavaScript

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HelloWorld<title/>
        <script type="text/javascript">
            //window.onload 事件在整个HTML文档被加载后执行
            window.onload = function(){
                var btn = document.getElementsByTagName("button")[0];
                //按钮点击事件
                btn.onclick = function(){
                    alert("Hello World");
                }
            }
        <script/>
    <head/>
    <body>
        <button>ClickMe<button/>
    <body/>
<html/>

获取元素节点

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素结点</title>
    <script type="text/javascript">
        window.onload = function(){
            //该方法为document对象的方法
            var bjNode = document.getElementById("bj");
            alert(bjNode);
            //获取所有的li结点,使用标签名获取指定结点的集合
            //该方法为Node接口的方法，即任何一个结点都有这个方法
            var liNode = document.getElementsByTagName("li");
            alert(liNode.length);
            //根据HTML文档中的元素的name属性名来获取指定的结点的集合
            //若HTML元素自身没有定义name属性，则该方法对于某些浏览器可能不支持
            var bjNode2 = document.getElementsByName("BeiJing");
            alert(bjNode2.length);
        }
    </script>
</head>
<body>
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li id="sh" name="ShangHai">上海</li>
        <li id="js" name="JiangSu">江苏</li>
    </ul>

</body>
</html>

操作属性节点

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性节点</title>
    <script type="text/javascript">
        //读写属性节点
        window.onload = function () {
            //获取指定的那个元素节点
            var nameNode = document.getElementById("name");
            //读取指定的属性的值
            alert(nameNode.value);
            //设置指定的属性的值
            //nameNode.value = "Hello";
        }
    </script>
</head>
<body>
<p>你喜欢哪个城市?</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>南京</li>
        <li>杭州</li>
    </ul>
    <br />
    name: <input type="text" name="username"
                 id="name" value="hello"/>
</body>
</html>

读写文本节点

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读写文本节点</title>
    <script type="text/javascript">

        window.onload = function(){
          /*  //获取city节点的所有子节点
            var cityNode = document.getElementById("city");
            //利用元素节点的childNodes方法可以获取指定元素节点的所有子节点
            //该方法不实用
            alert(cityNode.chileNodes.length);
            //获取city节点的所有li子节点
            var cityLinodes = cityNode.getElementsByTagName("li");
            alert(cityLinodes.length);
            //获取指定节点的第一个子节点和最后一个子节点
            alert(cityNode.firstChild);
            alert(cityNode.lastChild);*/
          //文本节点一定是元素节点的子节点
            //1.获取文本节点所在的元素节点
            var bjNode = document.getElementById("bj");
            //2.通过firstChild定义到文本节点
            var bjTextNode = bjNode.firstChild;
            //3.通过操作文本节点的nodeValue属性来读写文本节点的值
            alert(bjTextNode.nodeValue);

            bjTextNode.nodeValue("hello");
            alert(bjTextNode);
        }
    </script>
</head>
<body>
    <p>你喜欢哪个城市?</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>南京</li>
        <li>杭州</li>
    </ul>
    <br />
    name: <input type="text" name="username"
                 id="name" value="Hello"/>
</body>
</html>

练习

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script type="text/javascript">
        //点击每个li节点，若li节点的文本值没有^^开头，则加上，反之，去除
        window.onload = function () {
            var liNodes = document.getElementsByTagName("li");
            for(var i=0;i<liNodes.length;i++){
                liNodes[i].onclick = function () {
                    var val = this.firstChild.nodeValue;
                    var reg = /^\^{2}/g; //g表示全局匹配,/为匹配的开始和结束标志
                    //test为文件名
                    if(reg.test(val)){
                        val = val.replace(reg,"");
                    }else{
                        val = "^^" + val;
                    }
                    this.firstChild.nodeValue = val;
                }
            }
        }
    </script>
</head>
<body>
    <p>你喜欢哪个城市?</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>南京</li>
        <li>杭州</li>
    </ul>
    <br />
    name: <input type="text" name="username"
                 id="name" value="Hello"/>
</body>
</html>

初识JavaScript——简单了解

Hello world -JavaScript

代码

获取元素节点

代码

操作属性节点

代码

读写文本节点

代码

练习

代码

猜你喜欢