蓝鸥原生JS:DOM操作


零基础学习HTML5—html+css基础【蓝鸥出品】

http://blog.csdn.net/lanoulongjiang/article/details/52538672


什么是DOM

DOM:Do

1. js的组成部分

2. 一套标准,目前有DOM1和DOM2这两种标准

  我们可以使用DOM操作来操作页面中的元素。

DOM节点

子节点

 childNode:返回值一个数组,放的是父节点中所有的子节点

 nodeType:返回值是一个数组,1表示元素节点,3表示文本节点

  在某些浏览器中,如火狐,使用childNode获取所有元素节点时会把空格等一起或取出来,此时就需要使用nodeType来判断。

  示例:

<html lang="en"><head>

    <meta charset="UTF-8">

    <title>Documenttitle>

    <script type="text/javascript">

        // 使用childNode获取到所有的li标签,并将背景颜色改为红色

 

        window.onload = function  () {

            var oUl = document.getElementById('ul');

 

            for (var i = 0; i < oUl.childNodes.length; i++) {

                // 判断nodeType的值是否为1

                if (oUl.childNodes[i].nodeType == 1) {

                    oUl.childNodes[i].style.backgroundColor = 'red';

                };

            };

 

        }

    script>head><body>

    <ul id = 'ul'> 

        <li>li>

        <li>li>

        <li>li>

    ul>body>html>

 childern: 取子节点,与childNode相比,chlidren不会把非标签元素解析出来,不用担心兼容性问题

父节点

 parentNode

首尾子节点

IE下的语法

火狐下的语法

含义

firstChild

firstElementChild

lastChild

lastElementChild

兄弟节点

IE下的语法

火狐下的语法

含义

nextSibling

nextElementSibling

下一个

previousSilbing

previousElementSibling

上一个

添加元素

createElement(元素名):创建一个元素

父元素.appendChild(子元素)将子元素添加进父元素中(添加在最后边)

  示例:点击一次按钮,添加一个li标签

<html lang="en"><head>

    <meta charset="UTF-8">

    <title>Documenttitle>

    <script type="text/javascript">

        window.onload = function() {

            var oBtn = document.getElementById('btn');

            var oUl = document.getElementById('ul');

            var oText = document.getElementById('text');

 

            oBtn.onclick = function () {

                // 创建一个新标签

                var oLi = document.createElement('li');

                // 将输入框中的文字写在新li标签中

                oLi.innerHTML = oText.value;

                // 将新标签添加在父标签里

                oUl.appendChild(oLi);

            }

        }

    script>head><body>

    <input type="text" id = "text">

    <input type="button" value="点击添加" id = "btn">

    <ul id = "ul">

        <li>helloli>

    ul>body>html>

父元素.insertBefore(子元素,在谁之前插入),在谁之前插入子元素

<html lang="en"><head>

    <meta charset="UTF-8">

    <title>Documenttitle>

    <script type="text/javascript">

        window.onload = function() {

            var oBtn = document.getElementById('btn');

            var oUl = document.getElementById('ul');

            var oText = document.getElementById('text');

 

            oBtn.onclick = function () {

                // 创建一个新标签

                var oLi = document.createElement('li');

                // 将输入框中的文字写在新li标签中

                oLi.innerHTML = oText.value;

                // 将新标签添加在父标签里

                // oUl.appendChild(oLi);

                var aLi = document.getElementsByTagName('li');

                                // 在第0个元素之前插入新元素

                oUl.insertBefore(oLi, aLi[0]);

            }

        }

    script>head><body>

    <input type="text" id = "text">

    <input type="button" value="点击添加" id = "btn">

    <ul id = "ul">

        <li>helloli>

    ul>body>html>

删除元素

父元素.removeChild(要删除的元素):删除父元素中的某个子元素

  示例:点击删除,删除某个元素

<html lang="en"><head>

    <meta charset="UTF-8">

    <title>Documenttitle>

    <script type="text/javascript">

        window.onload = function() {

            var oBtn = document.getElementsByTagName('a');

            var oUl = document.getElementById('ul');

 

            for (var i = 0; i < oBtn.length; i++) {

                oBtn[i].onclick = function() {

                    oUl.removeChild(this.parentNode);

                }

            };

        }

    script>

head><body>

    <input type="text" id = "text">

    <input type="button" value="点击添加" id = "btn">

 

    <ul id = "ul">

        <li>hello<a href="javascript:;">删除a>li>

        <li>123<a href="javascript:;">删除a>li>

        <li>234<a href="javascript:;">删除a>li>

        <li>hel234lo<a href="javascript:;">删除a>li>

    ul>body>html>