DOM

最新推荐文章于 2024-07-15 14:11:16 发布

@西楚霸王

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量184

点赞数

分类专栏： DOM 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41027812/article/details/108264699

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM

一、概念

文档对象模型，在JavaScript中，加载HTML页面时会将HTML页面描绘成一个由节点组成的节点树(DOM树)
在DOM中，节点之间的关系有两种：
- 父子关系
- 兄弟关系
节点：HTML页面的内容，都可以被称为节点
节点分类：元素节点(标签)、文本节点(文字)、属性节点(属性)
允许开发人员通过JavaScript来操作HTML和XML

二、根据节点知识进行元素查找

（1）获取子节点(直接后代)
父节点.childNodes: 直接后代（文本节点和元素节点）
父节点.children: 直接后代（元素节点）
父节点.firstChild 第一个孩子（文本节点和元素节点）
父节点.lastChild 最后一个孩子（文本节点和元素节点）

    <div id="box">
        <div>hello</div>
        <div>world</div>     
    </div>
    <script>
        var box = document.getElementById('box');
        console.log(box.childNodes);
        //直接后代中的文本节点和元素节点  集合
        console.log(box.children);
        //直接后代中的元素节点  集合   
        console.log(box.firstChild);
        //#text   第一个孩子节点
        console.log(box.lastChild);
        //#text   最后一个孩子节点  
    </script>

（2）获取父节点
node.parentNode 父节点（元素节点）

    <div id="box">
        <div>hello</div>
        <div>world</div>     
    </div>
    <script>
        var box = document.getElementById('box');
       console.log(box.children[0].parentNode);
       //获取父节点(元素节点)      
    </script>

（3）获取兄弟节点
node.previousSibling 上一个兄弟（文本节点和元素节点）
node.nextSibling 下一个兄弟（文本节点和元素节点）

    <div id="box">
        <div>hello</div>
        <div>world</div>     
    </div>
    <script>
        var box = document.getElementById('box');
        console.log(box.children[0].nextSibling);
        //#text  下一个兄弟节点
        console.log(box.children[1].previousSibling);
        //#text  上一个兄弟节点
    </script>

（4）节点的属性
每一个节点都是对象，节点的常用属性：
node.nodeType(节点的类型：1(元素),2(属性),3(文本))
node.nodeName(元素节点，属性节点，文本节点)
node.nodeValue (节点的内容[值])

    <div class="box">
        hello
        <p class="b">你好</p>
    </div>
    <script>
        var box = document.getElementsByClassName('box')[0];
        var a = box.childNodes[0];
        var b = box.childNodes[1];
        console.log(a.nodeName);//#text
        console.log(a.nodeType);//3
        console.log(a.nodeValue);
        //   hello   包括空白（空格）
        console.log(b.nodeName);//p
        console.log(b.nodeType);//1
        console.log(b.nodeValue);//null
    </script>

三、节点操作

增删改查节点
（1）节点创建的方法
1、document.createElement() 可以创建一个元素节点
2、document.createTextNode() 创建一个文本节点

    <ul>
      <li>AAA</li>  
  </ul>
  <script>
      var oUl = document.getElementsByTagName('ul')[0];
      var oLi = document.createElement('li');
      //创建一个元素节点
      console.log(oLi);//<li></li>
      var oLi1 = document.createTextNode("hello world");
      //创建一个文本节点
      console.log(oLi1);//"world"
  </script>

（2）添加节点
1、父节点.appendChild() 在指定节点的末尾添加子节点

    <ul>
        <li>AAA</li>  
    </ul>
    <script>
        var oUl = document.getElementsByTagName('ul')[0];
        var oLi = document.createElement('li');
        //创建一个元素节点
        oLi.innerHTML = "hello world";
        oUl.appendChild(oLi);
        //在指定的节点末尾添加子元素
        var oLi1 = document.createTextNode("你好");
        //创建一个文本节点
        oLi.appendChild(oLi1);
        //将文本节点以孩子的形式追加到li中

2、node.insertBefore(新节点,旧节点) 在指定节点前插入节点

    <ul id="box">        
        <li>旧节点</li>
        <li>BBB</li>
    </ul>
    <script>
        var oUl = document.getElementById('box');
        var oldNode = oUl.children[0];//旧节点
        var newNode = document.createElement('li');//创建新节点、
        newNode.innerHTML = '新节点';
        oUl.insertBefore(newNode,oldNode);//在旧元素前插入新元素
    </script>

（3）删除节点
父节点.removeChild()

    <ul>
        <li>AAAA</li>
        <li>BBB</li>
        <li>CCCC</li>
        <li>DDDD</li>
    </ul>
    <script>
      var oUl = document.getElementsByTagName('ul')[0];
      oUl.removeChild(oUl.children[0]); 
      //删除第一个子元素
    </script>

（4）复制节点
cloneNode(flag)
参数说明：flag 布尔类型 , 默认为false,只复制一个节点；若为true，则连同子节点一起复制

    <div class="one">
        <div>a</div>
        <p>b</p>
    </div>
    <script>
        var o=document.getElementsByClassName('one')[0];
        var o1=o.cloneNode(true);
        //true 连同子节点一起复制 默认不复制子节点
        console.log(o1);
    </script>

（5）替换节点
父节点.replaceChild(newNode,oldNode)

    <div class="one">
        <div>旧节点</div>
        <p>b</p>
    </div>
    <script>
        var o=document.getElementsByClassName('one')[0];
        var op=document.createElement('p');
        op.innerHTML='新段落';
        var oldNode=o.children[0];//旧节点
        o.replaceChild(op,oldNode);  //替换
    </script>

（6）查找元素的方法
1、根据id找元素
getElementById()
2、根据标签名找元素
document.getElementsByTagName()
node.getElementsByTagName()
3、根据类名找元素
getElementsByClassName()
4、根据name找元素
getElementsByName()
5、根据选择器找元素注意：只支持IE8之上的浏览器

document.querySelector(选择器) 获取选择器对应的节点对象的第一个
document.querySelectorAll(选择器) 返回值是一个集合

<body>
  <div id="box">哈哈</div>
  <div class="one">呵呵</div>
  <div class="one">呵呵呵呵</div>
  <ul>
      <li>啧啧</li>
      <li>啧啧</li>
  </ul>
</body>
<script>
  var box = document.querySelector('#box');
  //哈哈  获取id为box的节点
  var one = document.querySelector('.one');
  //呵呵  只获得第一个类名为one的节点
  var oLi = document.querySelector('ul>li');
  //啧啧
  var ones = document.querySelectorAll('.one');
  //集合
  console.log(ones[0], ones[1]);
 //呵呵    呵呵呵呵
 </script>

四、样式操作

1、设置
对象.style.样式名=值;
2.取值
1、行内样式 obj.style.样式名
2、非行内样式 getComputedStyle(obj,null)[pro]
低版本IE：obj.currentStyle[pro]
3、IE兼容写法

function getStyle(obj,pro) {
   if(obj.getComputedStyle(obj,null)[pro]){//ie
       return obj.currentStyle[attr];
   }else{//标准
       return getComputedStyle(obj,null)[pro];
   }
}

五、属性操作

1、设置属性
（1）对象.属性名=值;
（2）对象[属性名]=值;
（3）setAttribute(属性名,属性值);

    <a href="#">百度</a>
    <script>
        var o = document.querySelector('a');
        o.setAttribute('href','http://taobao.com');
        console.log(o.href);
         //http://taobao.com
    </script>

2.获取属性
（1）对象.属性名
（2）对象[属性名]
（3）getAttribute(属性名)

    <a href="#" xx='哈哈哈'>百度</a>
    <script>
        var o = document.querySelector('a');
        console.log(o.xx);//undefined
        console.log(o['xx']);//undefined
        console.log(o.getAttribute('xx'));
        //哈哈哈  获取标签中新增的原先不存在的属性
    </script>

总结：上述示例中，为超链接添加了原本不存在的属性xx,通过对象.属性名和对象[属性名]均取不到值，通过getAttribute可以取到值

六、表格操作

DOM为了方便操作表格，提供了一些关于表格的属性
caption    标题
tHead      thead节点对象
tBodies    tbody集合
tFoot

        var tab=document.querySelector('table');
        console.log(tab.caption);//标题
        console.log(tab.tHead);//thead
        console.log(tab.tBodies[0]);//tbody 集合
        console.log(tab.tFoot);//tfoot

rows tbody中的行对象集合
cells tbody中的列对象集合

        var tab=document.querySelector('table');
        tab.rows[2].cells[1].style.background='red'；
        //第三行第二列

        var tr=document.createElement('tr');//创建行
        var td1=document.createElement('td');//创建列
        var td2=document.createElement('td');//创建列
        td1.innerHTML='王五';
        td2.innerHTML='18';
        //将列插入行内
        tr.appendChild(td1);
        tr.appendChild(td2);
        //将行插入表格中
        tab.tBodies[0].appendChild(tr);

@西楚霸王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

DOM一、概念文档对象模型，在JavaScript中，加载HTML页面时会将HTML页面描绘成一个由节点组成的节点树(DOM树)在DOM中，节点之间的关系有两种：父子关系兄弟关系节点：HTML页面的内容，都可以被称为节点节点分类：元素节点(标签)、文本节点(文字)、属性节点(属性)允许开发人员通过JavaScript来操作HTML和XML二、根据节点知识进行元素查找（1）获取子节点(直接后代)父节点.childNodes: 直接后代（文本节点和元素节点）父节点.child
复制链接

扫一扫