JavaScript-CSDN博客

本文链接：https://blog.csdn.net/xjdkxnhcoskxbco/article/details/140734555

③document.getElementByName(name属性)——返回指定name属性的元素节点的数组

④document.geElementByClassName（class值)——根据class值返回对应元素节点数组

5、this——触发事件的当前元素节点

6、onload 窗体加载事件

7、document.getElmentByTagName(标签名)

补充：局部变量放在函数外不影响使用

var表示数组

8、所有的数组在js中都可以通过循环来进行遍历

9、对于单选或者复选的checked属性在js中使用boolean来表示，如果选中则为true,没选中则为false

补充函数的嵌套：

10、我们可以通过元素节点.属性获取属性值、也可以通过元素节点.属性=新值来改变属性值

11、获取子节点

①childNodes——获取某元素节点下所有的子节点（不实用）

②元素节点.getElementsByTagNames(节点名)——获取指定结点名的子节点数组

12、如何获取元素节点中的文本

①首先获取该元素节点

②使用元素节点.firstChild得到它里面的文本节点

③使用文本节点.nodeValue得到它里面的文本

遍历：

13、创建节点

document.createElement(节点名)；——创建一个元素节点

document.createTextNode(文本)——创建一个文本节点

父节点.appendChild（新节点)——将新节点挂在某个父节点下

完整代码：

1、js——JavaScript

这是浏览器页面的脚本语言，它的代码是写在方法中，方法是被事件来调用的

2、方法的定义：

格式

  <script type="text/javascript">
        function 方法体(){
          方法体
        }
    </script>

3、alert——弹出对话框

 <script type="text/javascript">
        function hello(){
            alert("hello")
        }
        function test1(val){
            alert(val)
        }
    </script>
<button onclick="hello()">我是一个按钮</button>
<input type="text" onchange="test1(this.value)" value="hello"/>

4、常用事件：

①onclick-点击事件

<body>
<button onclick="hello()">我是一个按钮</button>

</body>

②onload-页面加载事件

③onchange——值改变的事件

 <script type="text/javascript">
 function test1(val){
            alert(val)
        }
    </script>
<input type="text" onchange="test1(this.value)" value="hello"/>

③document.getElementByName(name属性)——返回指定name属性的元素节点的数组

<body>
<script type="text/javascript">
 var btn4 = document.getElementById("btn4");
            btn4.onclick = function () {
                alert("按钮4被点击");
            }
    </script>

<button id="btn4">按钮4</button>
</body>

④document.geElementByClassName（class值)——根据class值返回对应元素节点数组

  var dels=document.getElementsByClassName("delete");
  alert(dels.length);

<a href="#" class="delete">删除</a>
<a href="#" class="delete">删除</a>
<a href="#" class="delete">删除</a>
<a href="#" class="delete">删除</a>
<a href="#" class="delete">删除</a>
<a href="#" class="delete">删除</a>

5、this——触发事件的当前元素节点

<input type="text" onchange="test1(this.value)" value="hello"/>

6、onload 窗体加载事件

window.οnlοad=function (){ } 这是窗体加载事件的一种比较流行的写法当窗体加载完成就自动触发该方法

 <script type="text/javascript">
        window.onload=function (){
            alert(1)
        }
    </script>

7、document.getElmentByTagName(标签名)

返回指定标签的一个元素节点数组

<script type="text/javascript">
        window.onload=function (){
           var btns=document.getElementsByTagName("button")//var数组
            alert(btns.length);
           btns[0].onclick=function (){
               alert("按钮1被点击")
           }
        }
        btns[0].onclick=function (){
            alert("按钮1被点击")
        }//放在函数外面也可以被调用
    </script>

补充：局部变量放在函数外不影响使用

var表示数组

8、所有的数组在js中都可以通过循环来进行遍历

<script type="text/javascript">
 var genders =document.getElementsByName("gender");

            for (var i = 0; i < genders.length; i++) {
                alert(genders[i].value+"----------"+genders[i].checked);
            }

    </script>

男<input type="radio"name="gender"checked="checked"value="boy"/>
女<input type="radio"name="gender"value="girl"/>

9、对于单选或者复选的checked属性在js中使用boolean来表示，如果选中则为true,没选中则为false

男<input type="radio"name="gender"checked="checked"value="boy"/>
女<input type="radio"name="gender"value="girl"/>

补充函数的嵌套：

 btns[2].onclick = function () {
                var genders =document.getElementsByName("gender");
                for (var i = 0; i < genders.length; i++) {
                    alert(genders[i].value+"----------"+genders[i].checked);
                }
            }//只有当按钮3被点击后才弹出框

说明：只有当按钮3被点击后才弹出框，选择男则：

选择女：

10、我们可以通过元素节点.属性获取属性值、也可以通过元素节点.属性=新值来改变属性值

document.getElementById("str").value="iweb";//这句

  document.getElementById("btn2").onclick=function (){
                var value1=document.getElementById("str").value;
                alert(value1);
                document.getElementById("str").value="iweb";//这句
            }
<input type="text" value="hello" id="str">

<button id="btn2">按钮2</button>

11、获取子节点

①childNodes——获取某元素节点下所有的子节点（不实用）

②元素节点.getElementsByTagNames(节点名)——获取指定结点名的子节点数组

          var cityNode = document.getElementById("city");
            var cityChild = cityNode.getElementsByTagName("li");
            alert(cityChild.length);
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>南京</li>

</ul>

12、如何获取元素节点中的文本

①首先获取该元素节点

   var cityNode = document.getElementById("city");
   var cityChild = cityNode.getElementsByTagName("li");
   var bjNode=cityChild[1];
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>南京</li>

</ul>

②使用元素节点.firstChild得到它里面的文本节点

var bjTextNode=bjNode.firstChild；

③使用文本节点.nodeValue得到它里面的文本

 var bjText=bjTextNode.nodeValue;

遍历：

  var cityNode = document.getElementById("city");
            var cityChild = cityNode.getElementsByTagName("li");
           //alert(cityChild.length);
           //alert(cityNode.length);
            for (let i = 0; i < cityChild.length;i++) {
                var bjNode=cityChild[i];
                var bjTextNode=bjNode.firstChild;
                var bjText=bjTextNode.nodeValue;
                alert(bjText);
            }

13、创建节点

document.createElement(节点名)；——创建一个元素节点

 var newLi=document.createElement("li");

document.createTextNode(文本)——创建一个文本节点

var newTextNode=document.createTextNode("成都");

父节点.appendChild（新节点)——将新节点挂在某个父节点下

 newLi.appendChild(newTextNode);

完整代码：

var cityNode = document.getElementById("city");
document.getElementById("createLi").onclick=function (){
                var newLi=document.createElement("li");
                cityNode.appendChild(newLi);
                var newTextNode=document.createTextNode("成都");
                newLi.appendChild(newTextNode);
            }
<button id="createLi">创建一个li节点</button>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>南京</li>
</ul>

题目：画一个文本框来写这个

document.getElementById("createLi").onclick=function (){
                var newText=
                    document.getElementById("str1").value;
                if (newText==null||newText==""){
                    alert("城市不能为空")
                }else{
                    var cityNode = document.getElementById("city");
                    var newLi=document.createElement("li");
                    cityNode.appendChild(newLi);
                    var newTextNode=document.createTextNode(newText);
                    newLi.appendChild(newTextNode);
                }

            }
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>南京</li>
</ul>

<button id="createLi">创建一个li节点</button>