DOM

本文详细介绍了如何使用DOM方法进行元素查询、节点操作、样式修改等,涵盖了getElementById、querySelector、appendChild、removeChild等核心函数,并解释了如何间接控制CSS属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

document 方法:

一、查

document.getElementById('id');

document.getElementsByTagName('div');  --> 返回类数组

document.getElementsByClassName('class');

document.getElementsByName('Name');

document.querySelector('div > span ');

document.querySelectorAll('div >span');

.parentNode(): 父节点;

.childNodes(): 子节点;

.firstChild(): 第一个节点;

.lastChild():最后一个节点;

.nextSibling(): 下一个兄弟节点;

.previousSibling():下一个兄弟节点的上一个节点;

.parentElement(): 元素父节点;

.children(): 元素子节点;

.childElementCount(): 子节点数量;

.firstElementChild():第一个元素节点;

.lastElementChild(): 最后一个元素节点;

.nextElementSibling():下一个兄弟元素节点;

.previousElementSibling():上一个兄弟元素节点;

.nodeName():标签名称;

.nodeValue():返回节点的文本;

.nodeType():该节点的类型;元素节点 --> 1 , 属性节点 --> 2 , 文本节点 --> 3 , 注释节点 --> 8 , document  --> 9 ,                                                            DocumentFragment --> 11 ;

document.documentElement():整个HTML 文档;

document.createElement(): 创建元素节点(创建标签);

document,createTextNode(): 创建文本节点;

document.createComment():创建注释节点;

.appendChild(): 插入操作;

.insertBefore(a,b): 插入操作;

parent.removeChild(): 父节点删除子节点;

.remove(): 删除自身;

parent.replaceChild(new,origin): new 标签替换origin标签;

.innerHTML(): 改变一个标签中的内容;

.innerText(): 获取标签中的文本内容;

.setAttribute('属性名', '属性值'): 给标签添加行间属性;

.getAttribute('属性名'): 获取属性的值;

document.body.scrollLeft() / document.body.scrollTop(): 求纵/横向滚动条滚动的距离;

getBoundingClientRect(): 查看元素的宽高等信息(几何尺寸信息);

.offsetWidth()/.offsetHeight(): 求元素的宽/高。

.offsetLeft()/.offsetTop():求元素的位置,相对于父元素。

.offsetParent():求最近的有定位的父级。

document简间接控制CSS属性:

.style    --> 类数组;

window.getComputedStyle(ele,null): 获取计算样式,当前元素所展示的一切CSS属性,包括默认值;null --> 获取伪元素的样式

div.currentStyle():元素当前的CSS属性;

window对象:

setInterval(function(){..}, 200): 定时器(循环的 );每隔多长时间执行一次函数;

clearInterval(): 清除Interval定时器;

setTimeout(function(){..}, 200): 定时器, 隔多长时间之后执行函数(只执行一次);

clearTimeout(): 清除Timeout 定时器;

window.pageYOffset()/ window.pageXOffset(): 求纵/横向滚动条滚动的距离;

window.innerWidth()/window.innerHeight(): 求可视区窗口的宽/高; 

window.scroll(x,y)/window.scrollTo(x,y): 让滚动条滚动到指定的位置;

window.scrollBy(x,y): 让滚动条滚动多少距离(累加效果);

Date对象: 

属性: constructor  返回此对象的Date函数引用    prototype ;

方法:

Date(): 返回当前日期字符串;

getDate():返回一个月中的第几天;

getDay(): 返回一星期中的第几天; 0 --> 星期日   1 --> 星期一 ....

getMonth():返回当前月份; 从0 开始  。

getFullYear():返回4位数年份

getYear(): 使用getFullYear代替;

getHours(): 获取小时;

getMinutes():获取分钟;

getSeconds(): 获取秒;

getMillseconds(): 获取毫秒;

getTime(): 获取自1970年1月1日至现在的毫秒数;

setYear():

setMonth():

setHours();

setMinutes();

setSeconds();

setMillseconds();

setTime();

toString(): 时间转换为字符串;

 

 

 

 

 

 

 

 

 

 

 

内容概要:本文深入探讨了Kotlin语言在函数式编程和跨平台开发方面的特性和优势,结合详细的代码案例,展示了Kotlin的核心技巧和应用场景。文章首先介绍了高阶函数和Lambda表达式的使用,解释了它们如何简化集合操作和回调函数处理。接着,详细讲解了Kotlin Multiplatform(KMP)的实现方式,包括共享模块的创建和平台特定模块的配置,展示了如何通过共享业务逻辑代码提高开发效率。最后,文章总结了Kotlin在Android开发、跨平台移动开发、后端开发和Web开发中的应用场景,并展望了其未来发展趋势,指出Kotlin将继续在函数式编程和跨平台开发领域不断完善和发展。; 适合人群:对函数式编程和跨平台开发感兴趣的开发者,尤其是有一定编程基础的Kotlin初学者和中级开发者。; 使用场景及目标:①理解Kotlin中高阶函数和Lambda表达式的使用方法及其在实际开发中的应用场景;②掌握Kotlin Multiplatform的实现方式,能够在多个平台上共享业务逻辑代码,提高开发效率;③了解Kotlin在不同开发领域的应用场景,为选择合适的技术栈提供参考。; 其他说明:本文不仅提供了理论知识,还结合了大量代码案例,帮助读者更好地理解和实践Kotlin的函数式编程特性和跨平台开发能力。建议读者在学习过程中动手实践代码案例,以加深理解和掌握。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值