javascript-DOM 基本概念及DOM节点

时间：2015-12-22 10:18:34 阅读：253 评论：0 收藏：0 [点我收藏+]

标签：

一：属性和方法

属性：是节点（HTML 元素）的值，您能够获取或设置（比如节点的名称或内容）。

方法：是我们可以在节点（HTML 元素）上执行的动作。（比如添加或修改元素）。

二：HTML DOM 定义：

DOM（Document Object Model）：文档模型，

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

在js中通过document这个对象提供的方法

三：HTML DOM 节点信息

1:HTML DOM 节点定义：是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点，节点也称之为元素

文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点

2：属性是节点（HTML 元素）的值，您能够获取或设置。每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

　　nodeName（节点名称）

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

　　注释：nodeName 始终包含 HTML 元素的大写字母标签名。

　　nodeValue（节点值）

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeValue 属性对于文档节点和元素节点是不可用的。

　　nodeType（节点类型）nodeType 是只读的。

元素：1
属性：2
文本：3
注释：8
文档：9

四：HTML DOM innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

五：访问 HTML 元素（节点）

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法，IE6，7，8不支持。
获取class元素常规封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
    <script>
        /*
         * getByClass(document, ‘li‘, ‘box‘);
         * getByClass(document, ‘li‘, ‘box,box1‘);
         * getByClass(document, ‘li‘, ‘box box1‘);
         * */
        window.onload = function() {

            var arr = getByClass(document,‘li‘,‘box‘);

            console.log( arr );

        }

        function getByClass(obj, tagname, classes) {

            var classes = classes.split(‘ ‘);
            //获取指定范围内的所有指定元素
            var eles = obj.getElementsByTagName(tagname);
            //一个用来保存结果的数组
            var result = [];
            //循环遍历选中的元素eles
            for (var i=0; i<eles.length; i++) {
                //把当前循环过程中某个元素的class取出来，并分割成数组（元素可能会有多个class）
                var classArr = eles[i].className.split(‘ ‘);
                //判断当前这个元素的class中是否有我们要找的class
                if ( inArray(classArr, classes) ) {
                    //如果当前元素中有我们要找的class，则把当前元素保存到结果数组中
                    result.push( eles[i] );
                }
            }
            //返回结果数组
            return result;

        }

        //[‘box‘, ‘box1‘]  [‘box1‘, ‘box2‘, ‘box‘]

        function inArray(arr1, arr2) {
            for (var i=0; i<arr2.length; i++) {
                var b = false;
                for (var j=0; j<arr1.length; j++) {
                    if (arr2[i] == arr1[j]) {
                        b = true;
                        break;
                    }
                }
                //如果当前这一次循环比较结束以后，b的值为真，则表示arr2中的某一个在arr1中是存在，否则就不存在
                if (!b) {
                    return false;
                }
            }
            //只要代码能运行到这里，就说明了arr2中的值在arr1中都是存在的
            return true;
        }
    </script>
</head>

<body>
    <ul id="ul1">
        <li>1111111</li>
        <li class="box">222222222</li>
        <li class="box box1">33333333</li>
        <li class="box2">44444444444</li>
        <li class="box1">55555555555</li>
        <li class="box1 box2 box">6666666666666</li>
    </ul>
</body>
</html>

View Code

获取class元素正则表达式

/*-------------------------- +
    获取id, class, tagName
     +-------------------------- */
    var get = {
    byId: function(id) {
    return typeof id === "string" ? document.getElementById(id) : id;
        },
    byClass: function(sClass, oParent) {
    var aClass = [];
    var reClass = new RegExp("(^| )" + sClass + "( |$)");
    var aElem = this.byTagName("*", oParent);
    for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
    return aClass;
        },
    byTagName: function(elem, obj) {
    return (obj || document).getElementsByTagName(elem);
        }
    };

View Code

六：HTML DOM划分：

-----------------------------------------------------------------------------------

按层级划分：父节点，子节点，兄弟节点

父子节点：上下层关系

兄弟节点：同一层关系

祖先节点：当前元素上面的所有的节点

子孙节点：当前元素下面的所有的节点

-----------------------------------------------------------------------------------

按类型划分：元素节点，文本节点，属性节点，注释节点，document节点

元素节点（1）：html标签

文本节点（3）：文字，特殊符号，换行符，制表符。。。（给用户看的）

属性节点（2）：元素节点上各种属性

注释节点（8）：文档中的注释

document节点（9）：特有的document对象

-----------------------------------------------------------------------------------

七：HTML DOM 节点树HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。

父节点拥有子节点。

同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

demo1:

<html>
<head>
    <title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>

demo分析：

-----------------------------------------------------------------------------------

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

-----------------------------------------------------------------------------------

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

-----------------------------------------------------------------------------------

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

javascript-DOM 基本概念及DOM节点

标签：

原文地址：http://www.cnblogs.com/dorislyx/p/5056991.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行