资讯动态

DOM对象:操作元素

发布时间:2026/8/23 19:09:29 来源:尧图企业网站定制
1.元素内容:innerHTML:元素内部的HTML文本innerText:元素内部当前可见的文本内容textContent:元素内部所有的文本除了innerHTML会解析html的标签输出为对应结构其他则不解析且在看源代码中对应文本会以实体的方式呈现即转义从而不解析为html结构2.元素属性标准属性获取dom对象.属性名隐式属性支持比如select的value是对应选中的option的valueselect本身没有value保留字冲突class的获取要用classNamefor的获取要用htmlFor自定义属性获取getAttribute设置setAttribute自定义属性使用data-属性名小驼峰命名法获取则可以通过: dom对象.dataset 这个集合获取自定义属性dom对象.dataset.属性名3.元素结构添加子元素append...node/appendChild(node)插入子元素insertBefore(node,child)把node插入到child前面若要插入到后面则child换成child.nextElementSibling即可插入和添加元素中使用的node并没有克隆只是移动克隆元素node.cloneNode(bool)参数传入true是深拷贝拷贝节点本身以及它的所有子节点和子孙节点否则是浅拷贝保留标签和所有属性内容为空替换元素replaceChild(node,child)替换子元素repalceChildren(...children)替换全部子元素replaceWith(...children )替换整个节点即调用的节点也被换掉了创建元素document.createElement(标签名)参数必须是字符串形式的document.createDocumentFragment()文档片段节点临时存放的节点在大量改写文档的时候的缓冲区改完了才会被放入到文档流中避免多次重复渲染页面删除元素remove()删除自己removechild(child)删除子节点若节点保留在变量中remove只会删除页面显示不会完全删掉对象除非没保留从而被回收4.元素样式控制类样式className获取或修改类名保留原来的类名添加新的样式的类名、classList控制元素类名的对象方法添加add类名移除remove(类名检验contains类名有则添无则删toggle类名booltrue相当于addfalse相当于remove直接设置样式获取样式dom对象.style仅是内联样式对象windows.getComputedStyle(元素对象,伪元素类型)计算样式对象

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价