DOM学习

2021/5/9 18:56:24

编程Tag： 属性元素 Dom console div 文档节点学习

本文主要是介绍DOM学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

学习目标

对DOM树进行增删改查

    在html文件中的任何文档内容都是节点（Node类型节点）。
        
        文档节点(全篇就一个)   document节点
        元素节点              element节点
        文本节点              text节点
        注释节点...              

        元素节点内，属性节点


    Node
    |           |           |
    Document    Dlement     Text


DOM： 找到节点  修改节点  删除节点  添加节点

** 1.Node类型**

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

2.节点关系
    属性：
    nodeType	表示节点类型	
                Document--> 9;Element -->1;TextNode -->3;Comment--> 8
                document 是Document构造函数的实例
                document.body是Element构造函数的实例
                document.body.firstChild 是TextNode构造函数的实例
    nodeName    该属性取决于节点类型，如果是元素类型，值为元素的标签名
    nodeValue   该属性取决于节点类型，如果是元素类型，值有null
    childNodes	
            保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组
            var arr = Array.prototype.slice.call(nodes,0);
    parentNode
            指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。
    previousSibling	兄弟节点中的前一个节点
    nextSibling		兄弟节点中的下一个节点
    firstChild		childNodes列表中的第一个节点
    lastChild		childNodes列表中的最后一个节点
    ownerDocument		
        指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

    方法：
    hasChildNodes()	
        在包含一个或多个子节点的情况下返回true

2.操作节点
    以下四个方法都需要父节点对象进行调用!
    appendChild()
        向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置 	
    insertBefore()  //第一个参数：要插入的节点；第二个参数：作为参照的节点；
        被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面
    replaceChild()  //第一个参数：要插入的节点；第二个参数：要替换的节点；
        要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置
    removeChild() //一个参数，即要移除的节点。
        移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。

    元素内容
        innerHTML  		返回元素内容，包括html标签
        innerText    		元素内部的文本，去除回车和换行
        textContent  		元素内部的文本，不去除空格和回车

    清空parent内部的内容
        parent.innerHTML = ``;

3.克隆：
    浅复制：只复制节点本身，不复制内部内容
    var cloneOne = one.cloneNode();

    深复制，复制节点本身和内部字节点
    var cloneOne = one.cloneNode(true);

2.document类型

1.文档子节点
    可以继承Node中所有的属性和方法
    属性：
    documentElement	始终指向HTML页面中的<html>元素。
    body		直接指向<body>元素
    doctype		访问<!DOCTYPE>, 浏览器支持不一致，很少使用
    title		获取文档的标题
    URL			取得完整的URL
    domain		取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测
    referrer	取得链接到当前页面的那个页面的URL，即来源页面的URL。
    images		获取所有的img对象，返回HTMLCollection类数组对象
    forms		获取所有的form对象，返回HTMLCollection类数组对象
    links	    获取文档中所有带href属性的<a>元素

2.查找元素
    getElementById()  
        参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。
    getElementsByTagName()
        参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
    getElementsByName() 
        参数为元素的name,返回符合条件的NodeList
    getElementsByClassName() 
        参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

3.Element类型

找

修改内部内容、获取内部内容
    （innerHTML\innerText\textContent）

删除 
    removeChild()

添加元素 
    appendChild()
    insertBefore()

创建元素
    document.creatElement('div');

属性操作 !!!
    获取到属性值
        <div id="one" class="two" title="hello"></div>
            div.id
            div.className
            div.title
            div.getAttribute('id')
    修改某一属性值
            div.id = 'day';
            div.title = '';
            div.setAttribute('id','day');

        //获取style属性值和onclick属性值(两种方法的区别)
            //.style .onclick 拿到的对象或函数
            console.log(div.style);            
            console.log(div.onclick);

            //getAttribute 拿到的是字符串
            console.log(div.getAttribute('style'));
            console.log(div.getAttribute('onclick'));

4.文本

div.innerText.length
div.innerText = div.innerText + 'hello';

5.作业

遍历数据，拿到一个对象，生成一个tr,tr中的td中的内容使用对象中的属性值。
最后追加到tbody中。
var students = [{
    name:'zhangsan',
    age:1,
    gender:'男'
},{
    name:'zhangsan',
    age:1,
    gender:'男'
},{
    name:'zhangsan',
    age:1,
    gender:'男'
}]
遍历到表格中

//将类数组转换成数组(两种方法)！！！

1.var arr = Array.prototype.slice.call(childs,0);

2.var arr = Array.from(childs);【推荐es6】

//实现从孩子节点中过滤出元素节点

var res = arr.filter(function (item) {
    return item.nodeType == 1;
});
console.log(res);       //Array [ div#one.two ]

//获取某一元素节点内的元素孩子节点

console.log(body.children);     //HTMLCollection { 0: div#one.two, length: 1, … }

输出：

console.info(newChild);      //<div>    黑色i图标
console.debug(newChild);      //<div>
console.error(newChild);      //<div>    红色i图标
console.warn(newChild);      //<div>     黄色i图标

这篇关于DOM学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

DOM学习

相关编程文章