您的位置：首页 > Web前端 > JavaScript

原生JS学习笔记4——DOM操作

2016-09-26 13:38 621 查看

原生JS学习笔记4——DOM操作

什么是DOM

DOM：Do

1. js的组成部分

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

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

DOM节点

子节点

• childNode：返回值一个数组，放的是父节点中所有的子节点

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

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

　　示例：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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标签

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>hello</li>
    </ul></body></html>
父元素.insertBefore(子元素，在谁之前插入),在谁之前插入子元素

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>hello</li>
    </ul></body></html>
删除元素

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

　　示例：点击删除，删除某个元素

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript 蓝鸥龙江 CSDN学院

相关文章推荐

新的分享

章节导航