Js节点操作
一、节点常用操作
document.createElement()用来生成网页元素节点,参数为元素的标签名
document.createTextNode()用来生成文本节点,参数为所要生成的文本节点的内容
node.appendChild()接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点
node.hasChildNodes()返回一个布尔值,表示当前节点是否有子节点
node.removeChild()接受一个子节点作为参数,用于从当前节点移除该子节点
node.cloneNode()用于克隆一个选中的节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。注意: 不会克隆绑定到该元素上的事件
node.innerHTML返回该元素包含的 HTML 代码。该属性可读写,常用来设置某个节点的内容;(不属于W3C DOM规范)
node.innerText返回该元素包含的内容。该属性可读写
node.nextElementSibling返回紧跟在当前节点后面的第一个同级Element节点,如果当前节点后面没有同级节点,则返回null
node.previousElementSibling返回紧跟在当前节点前面的第一个同级Element节点,如果当前节点前面没有同级节点,则返回null
node.parentElement返回当前节点的父级Element节点
node.childNodes返回一个NodeList集合,成员包括当前节点的所有子节点(注意空格回车也算)
node.firstChild返回树中节点的第一个子节点,如果节点是无子节点,则返回null
node.lastChild返回该节点的最后一个子节点,如果该节点没有子节点则返回null
二、节点属性
属性操作的标准方法:
node.getAttribute()返回当前元素节点的指定属性。如果指定属性不存在,则返回null
node.setAttribute()为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute()返回一个布尔值,表示当前元素节点是否包含指定属性
node.removeAttribute()从当前元素节点移除属性
三、css样式属性
节点对象.style.样式属性方式只能获取行内css样式,而写在 style 标签内的样式表,无法获取和修改。
getComputedStyle()接受一个节点对象,返回该节点对象最终样式信息的对象,所谓“最终样式信息”,指的是各种CSS规则叠加后的结果
注意: getComputedStyle() 是window对象下的方法,不是DOM对象
在具体使用的时候还有一些需要重点注意的细节:
1、名字需要改写,将横杠从CSS属性名中去除,然后将横杠后的第一个字母大写:
比如background-color写成backgroundColor
2、属性值都是字符串,设置时必须包括单位:
比如,divStyle.width的值不能写为100,而要写为100px
相关文章
- 体验js之美第八课-面向对象创建和继承终结篇
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(JQuery.js)图片相册掀开切换效果
- js jquery - 获取元素(父节点,子节点,兄弟节点),元素筛选 (转载)
- js清空子节点
- js 获取元素所有兄弟节点实例
- js逆向6-jshook,js扣代码
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- js操作节点对象注意事项
- js操作元素节点对象value
- 手写js 数组打平
- bootstarp modal自己主动调整宽度的JS代码
- javascript-js模拟form页面提交跳转
- Bootstrap的js插件之轮播(carousel)
- js学习1
- 【JS高级】js面向对象三大特性之多态_07
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- js给div设置随机色demo示例
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- JS Unicode编码和解码(6种方法)
- Chrome 控制台console 调试js 获取最近一次点选的DOM节点