DOM学习笔记

最新推荐文章于 2022-08-13 16:09:21 发布

Code devil

最新推荐文章于 2022-08-13 16:09:21 发布

阅读量89

点赞数

分类专栏： DOM 文章标签： html5 css html

本文链接：https://blog.csdn.net/qq_42445715/article/details/120602743

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一·DOM的一些简单方法与属性。

1·在javascript中，所有的节点都继承了Node类型，因此所有的类型都共享相同的基本属性和方法。

2·nodeName与NodeValue.

nodeName属性始终等于元素的标签名。nodeValue值如果由标签调用该属性，则会返回null，由文本节点调用则返回该文本节点的文本。

<div>123</div>
  <script>
      let div = document.querySelector('div');
      let text = div.childNodes;
      console.log(text);
      console.log(text[0].nodeValue);
      console.log(div.nodeValue);
      console.log(div.nodeName);
  </script>

3.childNodes,children,parentNode

<body>
    <div class="box">
        123
        <ul>
            <li>345</li>
        </ul>
        <div class="inner">678</div>
    </div>
    <script>
        let div = document.querySelector('.box');
        console.log(div);
        console.log(div.children);
        console.log(div.childNodes);
        console.log(div.childNodes[0].parentNode);
    </script>
</body>

4.操作节点的方法，这些方法都由父节点调用，用来操作子节点。

<body>
   <div class="box">
       <div class="inner"></div>
   </div>
   <script>
       let outerDiv = document.querySelector('.box');
       let ul = document.createElement('ul');//创建一个元素
       let box = document.createElement('div');
       let h2 = document.createElement('h2');
       outerDiv.appendChild(ul);//把这个节点添加到父节点中子节点的最后
       outerDiv.insertBefore(box,outerDiv.childNodes[0]);//插入在指定元素之前
       outerDiv.replaceChild(h2,outerDiv.children[1]);//用一个节点替换子节点
       outerDiv.removeChild(outerDiv.lastChild);//移除指定节点
       console.log(outerDiv);
   </script>

5.cloneNode（）方法

此方法为所有节点共享，它会返回与调用他的节点一模一样的节点。此方法接受一个布尔值作为参数，传入true则为深复制，会复制几点及整个子DOM树，如果传入false，则为浅复制，只会赋值这个节点。

<body>
   <div class="box">
       <div class="inner"></div>
   </div>
   <script>
       let div = document.querySelector('.box');
       console.log(div);
       let deepdiv = div.cloneNode(true);
       console.log(deepdiv);
       let nodeepdiv = div.cloneNode(false);
       console.log(nodeepdiv);
       div.insertBefore(deepdiv,div.firstChild);
       console.log(div);
   </script>
</body>

6·直接获取html和body元素的方式。

<body>
    <script>
        let html = document.documentElement;//获取html标签
        let body = document.body;//获取body标签
        console.log(html);
        console.log(body);
    </script>
</body>

7.获取元素的方法。

1,getElementById() 2,getElementsByTagName ()

3getElementsByName()，这个方法常用于单选按钮，因为同一字段的单选按钮必须具有相同的name属性才能确保把正确的值发送给服务器。

8.操作元素类型属性的方法。

1，getAttribute() 2 setAttribute() 3removeAttribute()

注意：getAttribute()的属性名与实际的属性名是一样的，所以要传入‘class’，这个方法主要用于取得自定义的属性值。

setAttribute(),接收两个参数，要设置的属性名和属性值，如果属性已经存在，则会替换原来的值。

<body>
   <div class="box"></div>
   <script>
       let div = document.querySelector('.box');
       let attr = div.getAttribute('class');
       console.log(attr);
       div.setAttribute('id','one');
       console.log(div);
    //    div.removeAttribute('id');
       console.log(div);
   </script>
</body>

Code devil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习笔记

一·DOM的一些简单方法与属性。 1·在javascript中，所有的节点都继承了Node类型，因此所有的类型都共享相同的基本属性和方法。 2·nodeName与NodeValue. nodeName属性始终等于元素的标签名。nodeValue值如果由标签调用该属性，则会返回null，由文本节点调用则返回该文本节点的文本。<div>123</div> <script> let di...
复制链接

扫一扫

专栏目录