javaScript WebAPIs编程 DOM 元素获取 元素操作
2020年6月27日web Api是 浏览器提供的一套操作浏览器功能和页面元素的Api(BOM 和 DOM)
DOM
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中所有标签都是元素,DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签,属性,文本注释等),DOM中使用node表示
获取dom元素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//获取body元素 document.body //获取html元素 document.documentElement //通过id获取元素对象 无需加符号 document.getElementById('id') //根据标签名获取元素,对象的集合,以伪数组的形式存储 document.getElementsByTagName() //h5新增 根据类名选择 无需加符号 document.getElementsByClassName('class-nmae') //h5新增 和jquery 选择器一样 , 获取第一个元素 重点 警号(#)代表id 点(.)代表类 document.querySelector() //h5新增 和jquery 选择器一样 , 获取所有元素 重点 document.querySelectorAll() |
操作元素
|
1 2 3 4 5 6 7 8 9 10 |
element.innerText //改变元素文本 element.innerHTML //改变元素html src href id alt title //常用元素属性操作 element.src = 'https://www.baidu.com' value type checked selected disabled //表单元素属性操作 element.style //样式属性 element.backgroundColor = '#000000'; 使用小驼峰命名 element.className //类名样式操作 element.className = 'first change' element.classList.add('three') //添加类 element.classList.remove('three') //删除类 element.classList.toggle('three') //切换类,有就添加,没就删除 element.getAttribute('属性名') //通过方法获取属性,主要获取程序员自定义属性值 element.setAttribute('属性名' , '属性值') //通过方法定义属性的值 element.removeAttribute('属性名') //移出属性 element.dataset //通过获取(data-)开头的属性 <p data-name data-id data-type ...> element.dataset.name(获取的过程中可以省略data-) |
操作节点
- 元素节点 nodeType 为1
- 属性节点 nodeType 为2
- 文本节点 nodeType 为3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*父子节点操作*/ element.parentNode //获取父节点 element.childNodes //获取nodeType 为 1,2,3 的子元素节点 element.children //获取nodeType 为 1的子元素节点(重点) element.firstChild //获取nodeType 为 1,2,3 的子元素中第一个节点 element.lastChild //获取nodeType 为 1,2,3 的子元素中最后一个节点 element.lastElementChild //获取nodeType 为 1 的子元素中第一个节点 IE9以上支持实际开发为了兼容这么写 element.children[0] element.firstElementChild //获取nodeType 为 1 的子元素中最后一个节点 IE9以上支持实际开发为了兼容这么写 element.children[element.children.length - 1] /*兄弟节点操作*/ element.nextSibling //获取nodeType 为 1,2,3 的上一个节点 element.previousSibling //获取nodeType 为 1,2,3 的下一个节点 element.nextElementSibling //获取nodeType 为 1 的上一个节点 IE9以上支持实际开发为了兼容这么写 只能封装自定函数 element.previousElementSibling //获取nodeType 为 1 的下一个节点 IE9以上支持实际开发为了兼容这么写 只能封装自定函数 /*节点创建,添加,删除,克隆*/ document.write('<div>123</div>') //创建元素的另一种方法, 如果页面文档流加载完毕,在调用会导致页面重绘 很少使用 var newElement = document.createElement('li') //创建元素节点 , innerHTML采用拼接字符串的方式效率慢,使用数组push join链接 ,提高效率 ,会比createElement快 element.appendChild(newElement) //追加元素 element.insertBefore(newElement , element.children[0]) //追加元素 第一个参数填写追加的元素 , 第二参数代表追加的位置 element.removeChild(element.children[0]) //删除父元素中的子元素 element.cloneNode() //克隆节点, 参数为空浅拷贝,复制标签不复制内容,克隆完毕后可以使用 insertBefore 和 appendChild 追加 |
