获得元素dom&创建dom&操作dom

javascript API笔记

特殊元素获取

var html = document.documentElement;
var body = document.body

获得元素document.

根据id名获取元素：getElementById;
根据标签名获取元素：getElementsByTagName，返回一个数组；
根据类名获取元素：getElementsByClassName，返回一个数组；
根据name属性值获取元素：getElementsByName，返回一个数组；
根据选择器获取元素：
querySelector：获取一个元素，推荐使用用法类似写css；
querySelectorAll：返回一个元素数组。

getElementById

var p1 = document.getElementById( ‘p1’ );
语法: document.getElementById( ‘id’ )
习惯: 写标签的时候, 属性使用双引号, 写字符串的时候属性写单引号

getElementsByTagName

<body>
    <p>111</p>
    <div>div</div>
    <p>222</p>
    <div>div</div>
    <p>333</p>
    <div>div</div>
</body>
 <script>
        // 获得所有的 p 标签, 然后打印出来
        var nodes = document.getElementsByTagName( 'p' );
    
    </script>

document.getElementsByTagName( ‘p’ );

getElementsByTagName

var div = document.getElementsByTagName( ‘div’ )[ 0 ];

getElementsByClassName

document.getElementsByClassName (‘class’) 通过类名获取元素，以伪数组形式存在。

querySelector

// 选择器 ( selector )
// -> 基本选择器: #id, .className, tagName, *
// -> 复合选择器: 子代选择器( > ), 后代选择器( ‘ ‘ ), …
    // 如果想到定位 这两个 p
    // #dv1 > p
    
    // 使用选择器获得元素的 语法
      // docuemnt.querySelector( '选择器的字符串' ) 获得所有的 符合选择器的元素中的 第 0 个

querySelectorAll

// document.querySelectorAll( ‘选择器字符串’ ) 获得所有的符合选择器的元素( 伪数组 )

1	`document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。`

document.body

如果需要获得页面中的 body, 除了使用 get 或 query 系列的方法之外
还可以使用 document.body, 其就是当前页面的 body 标签

children

使用 children 来获得元素的子元素

例如

<body>
    <ul id="menu">
        <li>
            <a href="#">测试</a>
            <ul>
                <li><a href="#">测试</a></li>
                <li><a href="#">测试</a></li>
            </ul>
        </li>
        <li>
            <a href="#">测试</a>
            <ul>
                <li><a href="#">测试</a></li>
                <li><a href="#">测试</a></li>
            </ul>
        </li>
    </ul>

    <script>
        // 使用传统的方法, 获得 主菜单的 a 标签
        // 可以使用 children 来获得元素的 子元素
        // 1> 拿到菜单的 容器 ( menu )
        // 2> 利用 children 来拿到容器中的 所有 li
        // 3> 循环遍历 li 找到每一个 li 中的 第 0 的子元素( children[ 0 ] )
        /*
        var menu = document.getElementById( 'menu' );
        var li_list = menu.children;
        // console.log( li_list );
        for ( var i = 0; i < li_list.length; i++ ) {
            var li = li_list[ i ]; // 就是每一个 一级菜单的 li 标签
            // console.log( li.children );
            var a = li.children[ 0 ];
            console.log( a );
        }
        */

        // 使用选择器
        var a_list = document.querySelectorAll( '#menu > li > a' );
        console.log( a_list );
    
    </scri

创建元素( 重要 )

利用字符串来拼接
拿字符串拼接只能一次性处理, 无法对每一个标签( DOM 对象 )精细的控制

<div>
           <a>主菜单</a>
           <div>
               <a href="...">子菜单</a>
               <a href="...">子菜单</a>
               ...
           </div>
       </div>

       var html = '<div class="menu">';

       // 遍历数据数组, 拼接每一个菜单
       for (var i = 0; i < data.length; i++) {
           // 在每一个循环中拼接出一个完整的字符串出来
           html += '<div>';
           html += '    <a>' + data[i].menuName + '</a>';
           html += '    <div class="hide">';

           // 循环子菜单, 循环的是 data[ i ].submenus
           for (var j = 0; j < data[i].submenus.length; j++) {
               // 拼接子菜单中的 a 标签的 内容
               var url = data[i].submenus[j].url;
               var submenuName = data[i].submenus[j].submenuName;

               html += '    <a href="' + url + '">' + submenuName + '</a>';
           }

           html += '    </div>';
           html += '</div>';
       }


       html += '</div>';

创建元素
document.createElement( ‘元素的标签名字’ )

元素操作

类名操作

Node指一个有效的DOM节点，是一个通称

Node.classList.add(‘class’) 添加class

Node.classList.remove(‘class’) 移除class

Node.classList.toggle(‘class’) 切换class，有则移除，无则添加

Node.classList.contains(‘class’) 检测是否存在class

自定义属性的获取和设置

获取自定义属性：元素对象.dataget[‘自定义属性名称’]

设置自定义属性：元素对象.dataset[‘自定义属性名称’]

1 2	`注：当我们如下格式设置时，则需要以驼峰格式才能正确获取 <div data-my-name="itcast"> 这样获取Node.dataset['myName']`

追加元素
父元素.appendChild( 子元素 )

插入元素

父元素.insertBefore( 新元素, 页面中的元素 )
将 “新元素” 插入到 “页面中的元素” 的前面

删除元素

父元素.removeChild( 子元素 )

修改元素
查询元素
删除( remove )元素从父元素中删除子元素
替换( replace )元素[ 知道 ]
cloneNode 与移动 DOM 元素

dom节点操作

html

1	`<div class="tableBody" id="mytable" ref="mytable"></div>`

获取节点

this.$refs.mytable   获取 
或者  this.$refs.mytable.$el
 或者    document.getElementById('id')
或者  document.querySelector('类名')
var container = document.getElementById('mytable')

创建节点

var newnode = document.createElement(“p”);

添加节点内容

newnode.innerHTML = “创建的节点内容”

插入节点

container.appendChild(newnode)

修改节点样式

1
2
3

newnode.style.width = '200px'
newnode.style.height = '200px'
newnode.style.background = 'pink';

普通节点删除

dom元素.remove()

querySelectorAll    节点  删除
document.querySelectorAll(‘.esedbox .triangle_b’)返回的不是数组，而是类数组，不能用remove方法（remove方法是dom元素节点的方法）

var box = document.querySelectorAll('.haha')
        Array.from(box).forEach((item) => {
          item.remove()
        })

获取元素长宽高和滚动距离

1.对于css盒子模型，我们使用width和height等来定义dom元素的宽高，而有时我们需要在js中获取元素的宽高进行一些操作。

2.dom操作提供了相应的属性来实现这一点

窗口大小
二，clientWidth和clientHeight
1.clientWidth和clientHeight用于获取元素的视口宽高，不包含border，margin,还要滚动条。

元素大小
三，offsetWidth和offsetHeight
1.元素的实际宽高，包含滚动条和border,不包含margin

四，scrollHeight和scrollWidth
1.当一个元素出现滚动时，这个元素的clientWidth和clientHeight表示了元素的视口宽高，而scrollHeight和scrollWidth用于表示该元素的滚动的实际宽高。

五，scrollTop
1.出现滚动条的元素，滚动距离上边界的距离。

2.如下图，红色的元素的scrollTop 等于绿色线段的长度。

3.scrollTop是可以修改的，修改时蓝色元素移动到相应位置

使用
dom.offsetWidth

var container = document.getElementById(‘mytable’)
console.log(‘width’,container.offsetWidth);

元素相对可视窗口的位置

dom.getBoundingClientRect()

let object = document.getElementById(‘object’)
let rectObject = object.getBoundingClientRect();
rectObject.top / left / right / bottom / width / height;

javascript API笔记

#dom操作

获得元素dom&创建dom&操作dom

http://www.dwyblog.cn/2020/05/29/获得元素dom&创建dom&操作dom/

作者

幸福来敲门

发布于

2020年5月29日

许可协议

vue_组件上一篇

vue随笔_生命周期下一篇