从零开始学JavaScript——DOM与表单操作

目录

一、获取节点

1、子节点

2、节点基本属性

3、父节点

4、其他节点

二、操作节点

1、创建节点

2、追加节点

3、插入节点

4、删除节点

5、替换节点

6、克隆节点

三、表单操作

1、获取表单元素

2、表单事件

3、表单方法

4、得焦失焦

5、input事件

6、change事件

---

一、获取节点

1、子节点

• 父级.children：返回元素节点（在IE8及以下，会返回注释节点，在IE9及以下，正常返回）

• 父级.childNodes：在IE9及以上，返回的包括换行节点，在IE8及以下，只返回元素节点

返回的都是一个类数组、伪数组，是一个对象。它们有长度，有下标，可以通过下标获取某一个

var li = ul.children;
console.log(li);

var li = ul.childNodes;
console.log(li);

2、节点基本属性

• 节点.nodeType

• 节点.nodeName

• 节点.nodeValue

<p>11111111</p>
<ul id="ul1">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

<script>
    var p = document.querySelector('p');
    var ul = document.getElementById('ul1');
    var li = ul.childNodes;

    // 节点.nodeType：节点类型，用1--12的数字来代表12种类型
    // 1:元素节点  2:属性节点  3:文本节点  9:文档节点
    console.log(p.nodeType); // 1
    console.log(ul.nodeType); // 1
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].nodeType);
    }


    // -----------------------------------
    // 节点.nodeName：节点名称，元素节点就是大写标签名，文本节点就是#text
    console.log(p.nodeName); // P
    console.log(ul.nodeName); // UL
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].nodeName);
    }

    // -----------------------------
    // 节点.nodeValue：节点内容
    // 它认为文本节点才有内容，元素节点没有内容
    console.log(p.nodeValue);
    console.log(p.childNodes[0].nodeValue); // 11111111

    console.log(p.innerText); // 11111111


</script>

3、父节点

•   元素.parentNode 返回父级

• 元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，则返回body

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');

console.log(box3.parentNode); // box2
console.log(box3.offsetParent);

4、其他节点

<ul id="list">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

<script>
    var ul = document.getElementById('list');

    // 第一个子节点
    // 父级.firstChild : 在标准浏览器有可能返回的是文本节点，在IE8及以下，只返回第一个元素节点
    // 父级.firstElementChild : 在标准浏览器返回第一个元素节点，而在IE8及以下，没有这个方法
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);
    var first = ul.firstElementChild || ul.firstChild;
    first.style.backgroundColor = 'red';

    // -----------------------------
    // 最一个子节点
    // 父级.lastChild
    // 父级.lastElementChild
    var last = ul.lastElementChild || ul.lastChild;
    last.style.backgroundColor = 'pink';

    // -----------------------------
    // 下一个兄弟节点
    // 元素.nextSibling
    // 元素.nextElementSibling
    var next = first.nextElementSibling || first.nextSibling;
    next.style.backgroundColor = 'green';

    // -----------------------------
    // 上一个兄弟节点
    // 元素.previousSibling
    // 元素.previousElementSibling
    var prev = last.previousElementSibling || last.previousSibling;
    prev.style.backgroundColor = 'yellow';
</script>

二、操作节点

1、创建节点

• 创建标签：document.createElement(标签名);

• 创建文本：document.createTextNode(文本);

2、追加节点

• 父元素.appendChild(子元素);

  子元素添加到父元素中，放到最后

3、插入节点

• 父元素.insertBefore(要插入的节点, 参考的节点);

  要插入的节点放在参考元素的前面

4、删除节点

• 父元素.removeChild(被删除的元素)

  返回被删除的元素

5、替换节点

• 父元素.replaceChild(新的节点，被替换的节点);

6、克隆节点

• 被克隆的元素.cloneNode(布尔);

  返回克隆出来的新节点，如果参数为true，则克隆子孙节点，如果为false，则只克隆当前这个标签

三、表单操作

1、获取表单元素

• 通过form.name属性，获取到对应的元素

<form action="" id="form">
    <input type="text" name="uname">
    <input type="password" name="pass">

    <input type="checkbox" name="aihao">
    <input type="checkbox" name="aihao">
    <input type="checkbox" name="aihao">
</form>

<script>
    // 通过 form.name 可以获取到相对应的表单元素

    var form = document.getElementById('form');

    var uname = form.uname;
    var pass = form.pass;
    var ah = form.aihao;


    console.log(uname, pass);
    console.log(ah);

</script>

2、表单事件

• form.onsubmit = function(){} // 提交事件

• form.onreset = function(){} // 重置事件

3、表单方法

• form.submit() // 提交方法

• form.reset() // 重置方法

4、得焦失焦

<input type="text">

<script>
    var input = document.querySelector('input');

    // 得焦事件
    input.onfocus = function () {
        this.style.backgroundColor = 'red';
    }

    // 失焦事件
    input.onblur = function () {
        this.style.backgroundColor = '';
    }


    // -----------------------------
    // 3s钟得到焦点，接着3s以后又失去焦点
    setTimeout(function () {
        input.focus();
        setTimeout(function () {
            input.blur();
        }, 3000);
    }, 3000);
</script>

5、input事件

<input type="text">

<script>
    var input = document.querySelector('input');

    // 内容只要发生变化时触发的事件
    // IE8及以下不支持
    input.oninput = function () {
        console.log(this.value);
    }

    // IE8及以下支持
    input.onpropertychange = function () {
        console.log(this.value);
    }
</script>

6、change事件

input type="text">
<input type="checkbox">

<script>
    // 表单元素.onchange = 函数
    // 失去焦点时内容发生变化时触发的事件

    var input = document.querySelectorAll('input');

    // 针对单行文本框
    input[0].onchange = function () {
        console.log(this.value);
    }

    // change主要针对单选和复选
    input[1].onchange = function () {
        console.log(this.checked);
    }
</script>