常见的一些DOM操作

- 日理万妓 2022-12-25 09:57 176阅读 0赞

### DOM知识点 ###

可视宽,高 document.documentElement.clientWidth / document.documentElement.clientHeight
    
    实际宽,高 document.documentElement.scrollWidth / document.documentElement.scrollHeight
    
    滚动条距离上,左边的距离 document.documentElement.scrollTop / document.documentElement.scrollLeft

### Dom常用操作 ###

增:

document.createElement() //创建元素
    
    parent.appendChild() //尾部插入
    
    parent.insertBefore(new,old) //从元素前插入

删:

ele.remove() //删除自己
    
    parent.removeChild(Child) //删除子元素

查:

document.getElementById()
    
    document.getElementsByClassName()
    
    document.getElementsByName()
    
    document.getElementsByTagName()

//以下两种方法支持选择器

document.querySelector(selector) //得到的是满足条件的第一个元素
    
    document.querySelectorAll() //得到的是满足条件的所有集合

元素的替换

parent.replaceChild(newEle, oldEle)

修改:

对内容的修改 表单: ele.value
    
    非表单: ele.innerText=' ' (结果只为文本)
    
    ele.innerHTML=' ' (结果包含标签)

属性 固有属性(元素对象的属性)

*  ele.attribute (ele.src)
 *  ele\[attribute\] (ele\[attribute\])

**两者之间的区别:**

.后面只能为属性值,不能为字符串

\[\]内的attribute可以为变量,而.后不可以

当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用

classList得到class的集合,其包含3个属性

*  ele.classList.add();
 *  ele.classList.remove();
 *  ele.classList.replace(old,new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)

以下三种方法既可以操作固有属性,又可以操作自定义属性

*  ele.getAttribute(属性名)
 *  ele.setAttribute(属性名,属性值) //本身自带新增功能
 *  ele.removeAttribute(属性名)

disabled 禁用表单元素

selected 下拉框

checked 单选,复选框

以上三种的值全为boolean类型

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 XML解析与DOM操作常见问题：

在XML解析与DOM（文档对象模型）操作中，可能会遇到以下几个常见的问题： 1. 解析错误：如果XML格式不正确或者不符合DOM的结构要求，解析过程中会报错。 2. 性能问

逃离我推掉我的手/ 2024年11月23日 18:00/ 0 赞/ 2 阅读

相关常见的一些DOM操作

DOM知识点可视宽,高 document.documentElement.clientWidth / document.documentElement.clie

- 日理万妓/ 2022年12月25日 09:57/ 0 赞/ 177 阅读

相关常见DOM树操作

文章目录 js操作dom节点 1.访问节点 2.生成节点 3.添加节点

本是古典何须时尚/ 2022年12月03日 13:07/ 0 赞/ 146 阅读

相关针对初学者的一些Git常见操作

关注+星标公众号，不错过精彩内容 ![9a6a96eee5bef3d0822c049ce3eeb3cd.gif][] 来源 | 老九学堂微信公众号 | 嵌入式专栏今

一时失言乱红尘/ 2022年11月05日 14:59/ 0 赞/ 158 阅读

相关 Dom的一些操作

Dom 的意思是文本对象模型........ 写几个常用的dom 方便以后查找 document.getElementById(Id) 这个的出镜率非常的高有

港控/mmm°/ 2022年08月24日 04:23/ 0 赞/ 169 阅读

相关 JQuery的Dom操作

[JQuery的Dom操作][JQuery_Dom] 小编最近参与了一个网站项目的开发，所以遇到了大量的js操作。让小编大为挠头。JQuery这东西，我貌似曾经熟练过一

我就是我/ 2022年07月16日 05:11/ 0 赞/ 246 阅读

相关一些常见操作方法

一、eclipse界面初始化（附带操作图） 2016年11月25日 14:25:58 [itzhangdaopin][] 阅读数：8238 标签： [eclipse][]

我会带着你远行/ 2022年05月12日 06:06/ 0 赞/ 204 阅读

相关 dom操作

document代表整个文档 var div = document.getElementById(‘id名’)；//返回是一个，不是数组 var div = docu

迷南。/ 2022年04月15日 03:29/ 0 赞/ 258 阅读

相关 DOM以及常见操作

什么是DOM? DOM是HTML文档对象模型（HTML）定义的一套标准方法，用来访问和操作HTML文档。 DOM是以树状结构组织HTML文档的，根据DOM,HTML每个

野性酷女/ 2022年03月22日 04:24/ 0 赞/ 172 阅读

相关 DOM节点常见的属性及操作

（1）常见节点属性 childNodes　　子节点　　　　　　　　nodeList children　　　　子节点（元素节点）　　HTMLCollect

傷城~/ 2021年12月24日 06:55/ 0 赞/ 270 阅读