jsDOM节点介绍

DOM

课前介绍：

DOM：document object model 文档对象模型

dom是一种技术，允许开发者通过JavaScript来操作HTML/XML

在DOM中，会把HTML页面描绘成一个由节点组成的倒立树。

节点：12种 常见的有：元素节点(标签)、属性节点(属性)、文本节点(内容)

节点的关系：父子 (父节点、子节点) 兄弟(兄弟节点)

一、获取节点

1.获取子节点

• childNodes 包含元素节点和文本节点

• children 元素节点

  children和childNodes都是集合(伪数组) 索引 length

    <div id="box">
        <div>AAAdiv>
        <p>BBBp>
    div>

    var o = document.getElementById('box');//元素节点对象
    // console.log(o, typeof o);
    console.log(o.childNodes);//子节点   元素节点/文本节点		5个
    console.log(o.children);//子节点     元素节点				2个

2.获取父节点

parentNode 返回值是一个元素节点对象

offsetParent 定位的父节点 没有定位—>body

3.节点属性

• nodeType 节点的类型
  • 元素节点 1
  • 属性节点 2
  • 文本节点 3
• nodeName 节点的名称 一般用于元素节点 DIV P SPAN
• nodeVaule 节点的内容 一般用于文本节点

4.其它获取节点的属性

• 第一个子节点

  • firstChild 第一个子节点(文本节点/元素节点)
  • firstElementChild 第一个子节点(元素节点)

• 最后一个子节点

  • lastChild 最后一个子节点(文本节点和元素节点)
  • lastElementChild 最后一个元素节点

• 上一个兄弟节点

  • previousSibling 元素/文本 节点
  • previousElementSibling 元素节点

• 下一个兄弟节点

  • nextSibling 元素/文本节点
  • nextElementSIbling 元素节点

二、节点的操作

通过JavaScript来对HTML进行增删改查

1.创建/增加节点

1）创建节点

• createElement(tagName) 创建一个元素节点对象
• createTextNode() 创建文本节点对象

2)添加节点：

• appendChild() 在父节点中末尾追加子节点
• insertBefore() 在指定节点前插入节点对象
  • 父节点.insertBefore(newChild,oldChild)

2.删除节点：

• remove() IE8+ 删除节点（自杀）
• removeChild() 删除指定子节点

        // o.removeChild(oC);//删除子节点
        oC.remove();//删除自身   “自杀”

3.替换节点

replaceChild(newChild,oldChild); 替换节点

        var oDiv=document.createElement('div');//创建的新的div标记
        oDiv.innerHTML="hello world";

        var o=document.getElementById('box');  //父节点      
        var op=o.children[0];//要被替换的节点

        o.replaceChild(oDiv,op);

4.复制/克隆节点

cloneNode(flag) 复制节点

注意：flag是一个布尔类型，默认为false，不复制子节点，只复制标签自身。true ，复制子节点

三、知识补充

1.节点查找方法补充

根据ID，根据tagName、className找元素

根据选择器找元素：

• querySelector() 根据选择器找元素 若有多个匹配元素，只取第一个
• querySelectorAll() 根据选择器获取所有匹配的元素 返回值是：伪数组

注意：这两个方法不支持低版本浏览器

2.属性操作

• 对象.属性名
  • 取值： 对象.属性名 例如：img.src
  • 赋值： 对象.属性名=值
• 对象[属性名]
  • 取值： 对象[属性名]
  • 赋值： 对象[属性名]=值
• 通过方法来实现属性操作
  • getAttribute(属性名)
  • setAttribute(属性名,属性值)

        var o = document.querySelector('img');

        // o.src="./img/2.JPG";
        // o['src']="./img/3.JPG";
        // console.log(o.src);
        // o.tag='111';//代码中自定义属性
        // console.log(o.tag);
        // o.setAttribute('src','./img/4.JPG')
        // console.log(o.getAttribute('src'));//相对路径


        // console.log(o.tag);//undefined
        // console.log(o['tag']);//undefined
        console.log(o.getAttribute('tag'));

   <img src="./img/1.JPG" alt="" tag="222">

注意：若需要取出HTML标签中自定义的 属性的值，对象.属性名和对象[属性名]均取不到值(undefined),可以通过getAttribute()方法来取出HTML标签中自定义属性的值。

3.常见DOM对象补充

document对象：文档对象

document.body : body节点对象

document.documentElement: html页面对象

四、表格操作

表格节点对象的常见的属性

• tHead
• caption 标题
• tBodies 集合------------> tBodies[0]
• tFoot
• rows 行 集合
• cells 列 集合