JavaScript 之 DOM [ Document对象 ]

bistukey

2019-06-28

关注关注

DOM

描述

DOM表示文档对象模型
DOM是独立于任何语言的
DOM是用于操作HTML页面的内容(文本、图像、等等...)、结构（元素标签）和样式（CSS属性）

引入JavaScript文件

可以在html页面添加JavaScript代码
方式分为：
- 内嵌样式：可以在 <head>元素中使用 <script>元素（闭合元素）在里面书写JS代码
  - 内嵌样式存在的问题：
    - 由于将 <script>元素写在html页面元素上面时，浏览器会先执行JavaScript代码，在执行html代码。会导致JavaScript代码中对html代码修改的内容无法显示（html代码还没有被执行）
    - 解决问题：window.onload = function() { } 机制将先执行html代码，后执行JS代码
- 内嵌样式的另一种方式：可以在 <body>元素中使用<script>元素（闭合元素）“建议写在最后面”
- 外联样式：可以在 <script>元素添加 src属性来引入JavaScript文件

Document对象

描述

表示为JavaScript代码提供了一个访问HTML页面的桥梁
并且提供了访问和修改页面内容的属性和方法

Document对象获取页面元素

Document对象提供了可以获取页面元素的方法
- getElementById()方法
- getElementsByName()方法
- getElementsByTagName()方法
- getElementsByClassName()方法
- querySelector()方法
- querySelectorAll()方法

getElementById()方法

以查找 ID属性的方式来定位指定元素的位置
由于 ID属性的唯一性，得到的元素只能有一个

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    getElementById()方法
     * 以查找 ID属性 的方式来定位指定元素的位置
     * 由于 ID属性 的唯一性，得到的元素只能有一个
 */
var s1 = document.getElementById( 'p1' );
console.log( s1 );// 显示 <p id="p1">获取有ID属性的元素</p>
</script>
</body>

getElementsByName()方法

以查找 name属性的方式来定位指定元素的位置
会得到全部带有 name属性的元素，以类数组表示得到的元素（ NodeList类型）

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    getElementsByName()方法
     * 以查找 name属性 的方式来定位指定元素的位置
     * 会得到全部带有 name属性 的元素，以类数组表示得到的元素（ NodeList类型 ）
 */
var s2 = document.getElementsByName( 'p2' );
console.log( s2 );// 显示 NodeList(3) [p, p, p]
</script>
</body>

getElementsByClassName()方法

以查找 class属性值的方式来定位指定元素的位置
会得到全部带有 class属性的元素，以类数组表示得到的元素（ HTMLCollection类型）

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    getElementsByClassName()方法
     * 以查找 class属性值 的方式来定位指定元素的位置
     * 会得到全部带有 class属性 的元素，以类数组表示得到的元素（ HTMLCollection类型 ）
 */
var s3 = document.getElementsByClassName( 'p3' );
console.log( s3 );// 显示 HTMLCollection(3) [p.p3, p.p3, p.p3]
</script>
</body>

getElementsByTagName()方法

以查找元素名的方式来定位指定元素的位置
会得到全部被指定的元素，以类数组表示得到的元素（ HTMLCollection类型）

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    getElementsByTagName()方法
     * 以查找 元素名 的方式来定位指定元素的位置
     * 会得到全部 被指定的元素，以类数组表示得到的元素（ HTMLCollection类型 ）
 */
var s4 = document.getElementsByTagName( 'p' );
console.log( s4 );// 显示 HTMLCollection(7) [p#p1, p, p, p, p.p3, p.p3, p.p3, p1: p#p1, p2: p]
</script>
</body>

querySelector()方法

以查找对应的CSS选择器的方式来定位指定元素的位置
会得到第一个对应该CSS选择器的元素 - 只有一个

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    querySelector()方法
     * 以查找 对应的CSS选择器 的方式来定位指定元素的位置
     * 会得到 第一个对应该CSS选择器 的元素 - 只有一个
 */
var s5 = document.querySelector( '#p1' );
console.log( s5 );// 显示 <p id="p1">获取有ID属性的元素</p>
</script>
</body>

querySelectorAll()方法

以查找对应的CSS选择器的方式来定位指定元素的位置
会得到对应该CSS选择器的全部元素，以类数组表示得到的元素（ NodeList类型）

<body>
<p id="p1">获取有ID属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p name= "p2" >获取有Name属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>
<p class="p3">获取有Class属性的元素</p>

<!-- 通过<script>元素来书写JavaScript代码 -->
<script>
/*
    querySelectorAll()方法
     * 以查找 对应的CSS选择器 的方式来定位指定元素的位置
     * 会得到 对应该CSS选择器 的全部元素，以类数组表示得到的元素（ NodeList类型 ）
 */
var s6 = document.querySelectorAll( '.p3' );
console.log( s6 );// 显示 NodeList(3) [p.p3, p.p3, p.p3]
</script>
</body>

Document对象创建页面节点

可以使用Document对象提供的属性或方法来在html页面中创建新节点
- createElement()方法
- createTextNode()方法
- createAttribute()方法

createElement()方法

用于创建新的元素节点

<body>
<script>
    /* 创建一个<p>元素 */
    var p = document.createElement( 'p' );

    /* 根据DOM节点树的关系将创建的新元素添加到HTML页面代码中 */
    /* 获取创建新元素的父级节点 */
    var body = document.body;

    /* 将新创建的元素节点做为指定父级节点的子级节点进行添加 - 通过appendChild()方法进行添加 */
    body.appendChild( p );
</script>
</body>

createTextNode()方法

用于创建新的文本节点

<body>
<script>
    /* 创建一个<p>元素 */
    var p = document.createElement( 'p' );

    /* 为新创建的元素节点添加文本节点 */
    var text = document.createTextNode( '创建文本节点' );

    /*
        根据DOM节点树的关系
         * 将创建的元素节点添加到HTML页面代码中
         * 将创建的文本节点添加到指定元素节点中
     */

    /* 获取创建新元素的父级节点 */
    var body = document.body;

    /* 将创建的文本节点添加到指定的元素节点中 - 通过appendChild()方法进行添加 */
    p.appendChild( text );
    /* 将新创建的元素节点做为指定父级节点的子级节点进行添加 - 通过appendChild()方法进行添加 */
    body.appendChild( p );
</script>
</body>

createAttribute()方法

用于创建属性节点
- 注意：该方法只能接收一个参数，做为属性节点的属性名，属性值使用 nodeValue 创建

<body>
<script>
    /* 创建一个<p>元素 */
    var p = document.createElement( 'p' );

    /* 为新创建的元素节点添加文本节点 */
    var text = document.createTextNode( '创建文本节点' );

    /* 为新创建的元素节点添加属性节点 */
    var attr = document.createAttribute( 'id' );
    /* 为属性节点添加属性值 */
    attr.nodeValue = 'p1';

    /*
        根据DOM节点树的关系
         * 将创建的元素节点添加到HTML页面代码中
         * 将创建的文本节点添加到指定元素节点中
         * 将创建的属性节点添加到指定元素节点中
     */

    /* 获取创建新元素的父级节点 */
    var body = document.body;

    /* 将创建的文本节点添加到指定的元素节点中 - 通过appendChild()方法进行添加 */
    p.appendChild( text );

    /* 将创建的属性节点添加到指定的元素节点中 - 通过setAttributeNode()方法进行添加 */
    p.setAttributeNode( attr );

    /* 将新创建的元素节点做为指定父级节点的子级节点进行添加 - 通过appendChild()方法进行添加 */
    body.appendChild( p );
</script>
</body>

类数组对象

在使用JavaScript代码对html页面中的元素进行定位置并显示元素数据内容时，会将数据内容集合到一个相似数组的 “类数组对象”
类数组分为
- HTMLCollection类型
  - 动态集合
  - 是一个元素的集合（html的标签）
  - 会根据HTML元素变化而变化
- NodeList类型
  - 静态集合
  - 是一个节点的集合（节点指元素节点、属性节点及文本节点）
  - 不会根据HTML元素变化而变化

<body>
<p class="p" id="p1">获取有Class属性的元素</p>
<p class="p">获取有Class属性的元素</p>
<p class="p">获取有Class属性的元素</p>
<p class="p">获取有Class属性的元素</p>
<p class="p">获取有Class属性的元素</p>

<script>
    /* 获取页面的body元素 */
    var body = document.body;

    /* 动态集合 - HTMLCollection */
    /* 通过指定类名获取指定数据 */
    var pclass1 = document.getElementsByClassName( 'p' );
    console.log( pclass1 );// 显示 HTMLCollection(5) [p.p3, p.p3, p.p3, p.p3, p.p3]
    /* 获取类数组长度 */
    console.log( pclass1.length );// 显示 5
    /* 通过指定ID获取指定数据 */
    var p1 = document.getElementById( 'p1' );
    /* 删除指定节点中的子级节点 */
    body.removeChild( p1 );
    /* 获取类数组长度 */
    console.log( pclass1.length );// 显示 4


    /* 静态集合 - NodeList */
    /* 通过CSS选择器获取指定数据 */
    var pclass2 = document.querySelectorAll( '.p' );
    console.log( pclass2 );// 显示 NodeList(5) [p.p3, p.p3, p.p3, p.p3, p.p3]
    /* 获取类数组长度 */
    console.log( pclass2.length );// 显示 5
    /* 通过CSS选择器获取指定数据 */
    var p2 = document.querySelector( '.p' );
    /* 删除指定节点中的子级节点 */
    body.removeChild( p2 );
    /* 获取类数组长度 */
    console.log( pclass2.length );// 显示 5
</script>
</body>

dom javascript dom对象