DOM

作者: 嘤嘤嘤998 | 来源:发表于2019-02-12 09:07 被阅读0次
节点

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点


image.png

<p>Hello world!</p>
文本节点 "Hello world!" 的父节点是 <p> 节点

编程接口

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

DOM常用操作

1. 查找节点

document.getElementById('id属性值');  //返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
document/element.getElementsByTagName('标签名');
document.getElementsByName('name属性值');

document/element.querySelector('CSS选择器');  //仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');  //返回所有匹配的元素
例如:document.querySelector("#demo");

document.documentElement  //获取页面中的HTML标签
document.body       //获取页面中的BODY标签
document.all['']    //获取页面中的所有元素节点的对象集合型

2. 新建节点

document.createElement('元素名');  //创建新的元素节点

document.createAttribute('属性名');  //创建新的属性节点

document.createTextNode('文本内容');  //创建新的文本节点

document.createComment('注释节点');  //创建新的注释节点
document.createDocumentFragment( );  //创建文档片段节点

3. 添加新节点

parent.appendChild( element/txt/comment/fragment );  //向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );  //向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );  //给元素增加属性节点

element.setAttribute( attributeName, attributeValue );  //给元素增加指定属性,并设定属性值

4. 删除节点

parentNode.removeChild( existingChild );  //删除已有的子节点,返回值为删除节点
element.removeAttribute('属性名');  //删除具有指定属性名称的属性,无返回值
element.removeAttributeNode( attrNode );  //删除指定属性,返回值为删除的属性 

5. 修改节点

parentNode.replaceChild( newChild, existingChild );  //用新节点替换父节点中已有的子节点

element.setAttributeNode( attributeName );  //若原元素已有该节点,此操作能达到修改该属性名的目的

element.setAttribute( attributeName, attributeValue );  //若原元素已有该节点,此操作能达到修改该属性值的目的
//element.setAttributeNode( attributeName );实例:
<body>
    <p class="classValue">增添id属性,并修改class属性值</p>
    <script>
        var element = document.getElementsByTagName('p')[0];

        // 添加属性节点
        var attr = document.createAttribute('id'); 
        attr.value = 'idValue';
        element.setAttributeNode(attr); 

        // 修改属性值
        var attr = document.createAttribute('class'); 
        attr.value = 'classNewValue';
        element.setAttributeNode(attr);     
    </script>
</body>
//element.setAttribute( attributeName, attributeValue ); 实例:
<body>
    <p class="classValue">增添id属性,并修改class属性值</p>
    <script>
        var element = document.getElementsByTagName('p')[0];
        element.setAttribute('id','idValue'); //添加属性节点
        element.setAttribute('class','classNewValue');//修改属性值
    </script>
</body>
添加文本节点,有两种常见方法:
  1. document.createTextNode('新增文本内容');
function addText(){
            var element = document.getElementsByTagName('p')[0];
            var txt = document.createTextNode('新增文本内容'); //创建文本节点
            element.appendChild(txt); //添加文本节点
        }
  1. element.innerHTML='新增文本内容'; 【推荐】
 function addText(){
            var element = document.getElementsByTagName('p')[0];
            element.innerHTML='新增文本内容'; //插入文本内容
        }

相关文章

  • dom 级别和dom 事件处理

    dom级别:dom0 dom1 dom2 dom3 dom事件处理:dom0 dom2 dom3 (1级DOM标准...

  • WY-DOM编程

    DOM Document Object Model DOM Core DOM HTML DOM Style DOM...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • js红包雨活动

    function Block( dom ){ this.dom = dom; //dom this.parentW...

  • DOM操作的分类

    DOM操作分为三个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 DOM Core DOM ...

  • 虚拟 DOM 和 diff 算法

    虚拟 DOM(Virtual DOM) 通过 JS 对象表示 DOM 结构,虚拟DOM 是对 DOM 的抽象 通常...

  • jQuery——DOM

    DOM操作分类 一般来说,DOM操作分为3个方面,即DOM Core、HTML-DOM、CSS-DOM。 DOM ...

  • JavaScript高级程序设计前四章

    1. DOM级别 1.1 DOM1级 由DOM核心(DOM Core)和DOM HTML两个模块组成。 DOM核心...

  • DOM分级详解

    DOM1 级(DOM Level 1) DOM1 级由两个模块组成:DOM核心(DOM Core)和DOM HTM...

网友评论

      本文标题:DOM

      本文链接:https://www.haomeiwen.com/subject/hgxceqtx.html