华拓网
您的当前位置：首页正文

DOM操作

来源：华拓网

Document Object Model 文档对象模型

DOM是HTML和XML文档的编程接口。将web页面和脚本或编程语言连接起来了。
要改变页面的某个东西，JS就要获得对HTML文档中所有元素进行访问的入口。都是通过DOM来获得的。

document对象

每个载入浏览器的HTML文档都会成为document对象。包括了文档的基本信息，可以通过JS对HTML页面中的所有元素进行访问修改。

document对象的常用属性

  • doctype
document.doctype; //<!DOCTYPE html>
document.doctype.name; //"html"
  • body，head
document.head;
document.body;

可以通过这俩属性获取文档的head节点和body节点

  • activeElement 返回当前文档中获得焦点的那个元素

  • documentURL , domain , lastModified
    1,documentURL属性返回当前文档的网址
    2，domain属性返回文档域名
    3，lastModified返回当前文档的最后修改时间

  • location
    location属性返回一个只读对象，提供了当前文档的URL信息

  • title, characterSet
    1,title属性返回当前文档的标题，该属性可写
    2，characterSet属性返回渲染当前文档的字符集

  • readyState
    readyState属性返回当前文档的状态，有三个值
    1,loading 加载html代码阶段，尚未完成解析
    2，interactive 加载外部资源阶段
    3，complete

  • compatMode
    compatMode属性返回浏览器处理文档的模式，
    1，BackCompat: 向后兼容模式，即没有添加DOCTYPE
    2，CSS1Compat 严格模式，添加了DOCTYPE

  • cookie

  • innerText
    innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外层div的innerText的返回内容是"123456"

  • innerHTML , outerHTML
    innerHTML属性作用和innerText属性类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM
<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外层div的innerHTML的返回内容是<p>123<span>456</span>></p>
outerHTML返回内容还包括本身

document对象的常用方法

  • open() ,close()
    document.open方法用于新建一个文档，供write方法写入内容。实际上等于清除当前文档，重新写入内容
    document.close()方法用于关闭open方法所新建的文档，一旦关闭，write方法就无法写入内容
  • write()
    docuement.write()方法用于向当前文档写入内容，只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
    document.open();
    document.write('hello');
    document.write('deejay');
    document.close();

一般不建议使用document.write()

Element对象

除了document对象，最常用的就是Element对象了，Element对象表示HTML元素。
Elment有几个重要属性：

  • nodeName: 元素标签名 还有个类似的tagName
  • nodeType: 元素类型
  • className： 类名
  • id： 元素id
  • children：子元素列表（HTMLCollection）
  • childNodes： 子元素列表（NodeList）
  • firstChild 第一个子元素
  • lastChild 最后一个子元素
  • nextSibling: 下一个兄弟元素
  • previousSibling 上一个兄弟元素
  • parentNode,parentElement ：父元素

查询元素

  • getElementById()

  • getElementsByClassName()

  • getElementsByTagName()

  • querySelector()
    querySelector()方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。使用举例：

<div id="ct">
    <a href="#">my link</a>
    <h1 class="title">my title</h1>
    <p class="title"></p>
</div>
<a href="#">deejay</a>
<script>
    document.querySelector('#ct a'); //选中了#ct下面的a标签，
    document.querySelector('#ct .title'); //选中了#ct下的第一个.title元素，即只选中了h1标签
    //  querySelector()仅仅只能选中一个元素
  • querySelectorAll()
    针对querySelector()只能选择一个元素的情况，querySelectorAll()可以选中多个元素。得到一个类数组对象。
  • elementFromPoint()
    返回位于页面指定位置的元素

创建元素

  • createElement()
    用来生成HTML元素节点，参数为元素的标签名，如"div"，不能带<>或者null，会报错
    var newDiv = document.createElement("div");
  • createTextNode()
    生成文本节点，参数为要生成的文本节点的内容
  • createDocumentFragment()
    生成一个DocumentFragment对象，即一个存在于内存中的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。 优点是不属于当前文档，所以不需要重新渲染，比起直接修改，性能更好。举例说明：
    var arr = [1,2,3,4,5,6,7,8]; //假设有这么一个数组，要把每一项都插入到页面当中去，那么页面每插入一次就要重绘一次，影响性能，所以使用documentfragment
    var docFragment = document.createDocumentFragment(); 
    // 先创建一个documentFragment对象，再把数组遍历，每一项都加入到一个另外的DOM对象中，再把这个DOM对象添加到documentFragment对象中，再将documentFragment对象添加到页面的目标元素中
    for (var i = 0; i < arr.length; i ++) {
        var node = document.createElement('div');
        node.innerText = arr[i];
        docFragment.appendChild(node);
    }
    target.append(docFragment);

修改元素

  • appendChild()
    把一个DOM对象添加到他的父容器上，在元素末尾
    var newDiv = document.createElement('div');
    var newText = document.createTextNode('hello deejay');
    newDiv.appendChild(newText);
  • insertBefore()
    在某个元素之前插入元素
  • replaceChild()
    接受两个参数，要插入的元素和要替换的元素

删除元素

删除元素用removeChild()方法即可，举例：
parentNode.removeChild(childNode);

clone元素

cloneNIode()方法用于克隆元素，方法有一个布尔值的参数，传入true的时候会深复制，会复制元素及其子元素（IE还会复制其事件），false的时候只会复制元素本身
node.cloneNode(true);

属性操作

  • getAttribute()
    用于获取元素的attribute值
    node.getAttribute('id');
  • createAttribute()
    生成一个新的属性对象节点，并且返回它
    attribute = document.createAttribute(name);
    createAttribute的方法的参数name，是属性的名称
  • setAttribute()
    用于设置元素属性
    var node = document.getElementById('div1');
    node.setAttribute('myAttribute','newValue'); // 设置了myAttribute属性的值为newValue
  • removeAttribute()
    用于删除属性：
    node.removeAttribute('id');

classList

element.classList使用举例：

    <p class="title"></p>
    var p = document.querySelector('.title');
    console.log(p.classList); //["title"] 输出一个数组，内容为元素的class
    p.classList.add('active'); // 给p元素增加一个叫active的类
    p.classList.remove('active'); //删除active类
    p.classList.contains('active'); //判断p元素是否有active这个类

一般常用到的DOM操作方法：

    var ct = document.querySelector('#ct');
    document.querySelectorAll("#ct .title");
    var img = document.createElement('img');
    
    ct.appendChild(img);
    img.getAttribute('src');
    img.removeAttribute('src');
    
    ct.innerHTML = '<img 
';
    ct.innerText = 'hello';

Copyright © 2019- huatuo3.cn 版权所有
湘ICP备2023017654号-3

Top