JavaScriptDOM-helloWorld

function RQcheck(RQ) {//验证日期的方法
  var date = RQ;
  var result = date.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/);

  if (result == null)
  return false;
  var d = new Date(result[1], result[3] - 1, result[4]);
  return (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4]);

}

--或者++在js中是不支持的


1.写js代码的位置

  由helloWorld.html,helloWorld2.html,helloWorld3.html可知
    >html页面的加载顺序是由上到下的
    >标准的写法是helloWorld.html的写法,window.onload可以使方法是在页面加载完成后才执行的,<script>写在head中title下面。
    >helloWorld2.html中的写法固然简单,但html语句和js代码耦合在了一起
    >helloWorld3.html可知各个位置的区别
    ><script>放在整个页面的最后写又不符合js代码的书写习惯

2.获取节点

节点分为三种:元素节点;属性节点;文本节点

01.获取元素节点(3种方式)
    //只有document有这个方法,并且id要求唯一
    var taobao = document.getElementById("taobao");

    //只有document有这个方法,通过节点的name属性来获取节点
    var qqs = document.getElementsByName("qq1");

    //document和taobao(节点对象)都有这个方法,通过节点标签的名字来获取节点
    var nodes = taobao.getElementsByTagName("br");

02.读写属性节点
    01.
    //通过.的方式来获取和修改节点的属性值
    var attr = document.getElementById("attr");
    alert(attr.value);//获取属性节点的值
    attr.value = "你好";//修改属性节点的值
    02.
    node.getAttributeNode("id");
    
03.获取子节点的方法
    //得到父节点
    var c1 = document.getElementById("form");
    //通过.childNodes得到所有的子节点
    alert(c1.childNodes.length);
    //通过.firstChild得到第一个子节点
    alert(c1.firstChild.name);
    //通过.lastChild得到最后一个子节点
    alert(c1.lastChild);
    //通过Node对象的getElementsByTagName来获取子节点
    var cc = c1.getElementsByTagName("input");
    alert(cc[0].name);

04.读写文本节点
    文本节点一般是子节点,可以先获取到子节点,然后通过.nodeValue来获取文本内容
        var c2 = document.getElementById("form");
        alert(c2.lastChild.nodeValue);

3.节点的三个属性

    window.onload = function () {
        var btns = document.getElementsByTagName("button");
        //元素节点
        var btn = btns[0];
        alert(btn.nodeType);//1
        alert(btn.nodeName);//BUTTON
        alert(btn.nodeValue);//null
        //文本节点
        var text = btn.firstChild;
        alert(text.nodeType);//3
        alert(text.nodeName);//#text
        alert(text.nodeValue);//点我
        //属性节点
        var att = btns[1].getAttributeNode("name");
        alert(att.nodeType);//2
        alert(att.nodeName);//name
        alert(att.nodeValue);//jyf
        
    }
    nodeType和nodeName是只读的
    nodeValue是可以修改的
    只有文本节点的nodeValue是常用的

4.操作节点

1.创建元素节点
    document.createElement("");返回值是元素节点的引用,其中的字符串参数为TagName

2.创建文本节点
    document.createTextNode("");返回值是文本节点的引用,其中的字符串参数为文本内容
3.为元素节点添加子节点 var element = document.createElement("li"); element.appendChild(document.createTextNode("你好");会作为element节点的最后一个子节点添加<li>你好</li>;若子节点原来就在页面上,那么还会有移动的效果 4.替换子节点 bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode //replaceChild方法返回原子节点的引用,且新子节点(bNode)从原来的位置被移动到原节点(aNode)的位置 aParentNode.replaceChild(bNode, aNode); 若要使两个节点互换,需自己定义方法实现 function replaceEach (aNode, bNode) { var aParentNode = aNode.parentNode;//获取父节点 var bParentNode = bNode.parentNode; var aNode2 = aNode.cloneNode(true);//克隆节点,若参数为true表示带子节点的克隆 bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode //replaceChild方法返回原子节点的引用,且新子节点(bNode)从原来的位置被移动到原节点(aNode)的位置 aParentNode.replaceChild(bNode, aNode); } 5.获取父节点 var aParentNode = aNode.parentNode;//获取父节点 6.删除节点 this.parentNode.removeChild(this);返回值为被删除的节点 7.额外 //将输入框中的内容的开头和结尾去除空格 var reg = /^s*|s*$/g; content = content.replace(reg,""); document.getElementsByName("content")[0].value = content; //若去掉空格后为“”,那就弹出请输入名字 if(content == "") { alert("请输入名字"); return false;//若这个方法是响应在submit的onclick上面的,那么return false,表单是不会提交的 } //有实验可知,就算不去掉开头和结尾的空格,添加上的开头和结束的空格也会自动去除

5.获取子节点

1.firstChild
2.lastChild
3.getElementsByTagName("");
4.childNodes

Node节点的方法,带括号的在使用时需要带括号,不带括号的直接.就能用

事件后面跟的方法的注意点:

//aNodes[i].onclick = remove3;
//这里写remove3()和remove3是不同的:
//前者表示当节点被点击时响应remove3方法的返回值,所以在页面加载完成后会直接执行remove3方法
//后者不加括号代表的remove3方法引用,会响应时执行方法体,且return false会取消节点的默认响应行为

单选框的注意点:

//若单选框节点被选中那么checked数据就会存在
    if (typeNodes[i].checked) {}

多选框的注意点(type=“checkbox”):

  多被选中那么checked属性为true;

  没被选中为false;   

循环体中要注意的点:

        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length ; i++) {
            /*可以的
            lis[i].onclick = function () {
                alert(this.firstChild.nodeValue);
            }
            */
            
            //lis[i].onclick = alert("nihao");
            //这样不行,一开始就会先弹出五次nihao。因为这句的意思是将alert方法的结果返回到onclick事件,所以会先执行方法
            
            /*这样不管点哪一个都是5,因为当点击时循环已经结束了,i就是5
            lis[i].onclick = function () {
                alert(i);
            }
            */
            
            lis[i].onclick = tanchu;//这样是可以的,因为tanchu是方法的引用
            
            //lis[i].onclick = tanchu();//这样写不行,同lis[i].onclick = alert("nihao");
            
            function tanchu () {
                alert(this.firstChild.nodeValue);
            }
        }

注意空白文本节点的存在

bNode.nextSibling;//获取bNode的下一个兄弟节点

ul.insertBefore(ay,jz);//将ay从原来的位置移动到ul的子节点jz的前面

innerHTML属性:浏览器几乎都支持该属性,但不是DOM的标准组成部分。.innerHTML可以用来读写标签体中的HTML内容

    window.onload = function() {//互换了两个ul中的子节点
        var ul1 = document.getElementsByTagName("ul")[0];
        var ul2 = document.getElementsByTagName("ul")[1];
        var temp = ul1.innerHTML;
        ul1.innerHTML = ul2.innerHTML;
        ul2.innerHTML = temp;
        alert(temp);//输出的是:<li id="jz">焦作</li>
                    //<li id="ay">安阳</li>
                    //<li id="kf">开封</li>
                    //<li>新乡</li>
                    //<li>郑州</li>
    }

事件的总结:

  window.onload//页面被加载完成

  .onclick//被点击时

  .onchange//改变时,例如下拉框中的选项被修改

节点自带特殊属性总结:

  .parentNode//父节点

  .childNodes//子节点的集合

  .lastChild//最后一个子节点

  .firstChild//第一个子节点

  .nextSibling//获取下一个兄弟节点 

  .defaultValue//是在编写html页面时,在节点上写的value属性的值

 对话框

  alert(“”)//参数为字符串,为弹出对话框中的话,该框只有一个确定按钮。

confirm对话框

  confirm(“”)//参数为字符串,为弹出对话框中话,该框有两个按钮,若点击确定,这个方法返回true,点击取消,返回false。

原文地址:https://www.cnblogs.com/feifeiyun/p/6685176.html