JavaScript 10 DOM
2021/6/5 20:21:41
本文主要是介绍JavaScript 10 DOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
获取标签属性和内容
DOM对象将标签的属性和内容封装成了对象的属性
<div id = "div">我是一个div <span>我是span</span> </div> <script> var box = document.getElementById('div'); console.dir(box); //内部包含标签的属性和内容,内容也被封装成div对象的一个属性。通过innerHTML和innerText两个属性可获取标签之间的内容。innerHTML会取到div中所有内容,包括内部的span标签,换行等原封不动获取到,而innerText只会获取的标签的内容,不获取标签 console.log(box.innerHTML); console.log(box.innerText); </script>
innerHTML:因为innerHTML是包含标签的,所以可以通过inner HTML对想要改变的内容加入标签
innerText:在其内容中有标签的话,会直接在网页上打印出来
//b标签使内容加粗 box.innerHTML = '<b>我爱学习</b>,学习使我快乐!';
HTML转义符:
" "
, '
& &
< <
> >
空格
判断一个属性是否存在:
console.log(typeof box.a) //存在返回该属性的类型,不存在返回undefined
HTML标签属性只有一个值的属性,DOM中对应的元素的属性值是布尔类型的,比如表单元素属性: disabled(禁用属性),checked(复选框选中属性),selected(下拉菜单选中属性)
获取焦点事件:onfocus
失去焦点事件:onblur
自定义属性:
HTML标签自定义属性,前提是标签不具备这个属性。<div age=12></div>
获取自定义属性:自定义属性用正常的DOM方法无法获取到,需要object.getAttribute('自定义属性名')来获取
<div age=12 id='ww'></div> <script> ww = document..getElementById('ww'); console.log(ww.getAttribute('age')); //获取到自定义属性age的值 </script>
设置添加自定义属性:一般不这么用,都在标签中自行添加
box.setAttribute('name', 'zhangsan');
移除自定义属性:
box.removeAttribute('age');
这篇关于JavaScript 10 DOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04敏捷管理与看板工具:提升研发、设计、电商团队工作效率的利器
- 2025-01-04智慧养老管理工具如何重塑养老生态?
- 2025-01-04如何打造高绩效销售团队:工具与管理方法的结合
- 2025-01-04解决电商团队协作难题,在线文档工具助力高效沟通
- 2025-01-04春节超市管理工具:解锁高效运营与顾客满意度的双重密码
- 2025-01-046种主流销售预测模型:如何根据场景选用最佳方案
- 2025-01-04外贸服务透明化:增强客户信任与合作的最佳实践
- 2025-01-04重新定义电商团队协作:在线文档工具的战略作用
- 2025-01-04Easysearch Java SDK 2.0.x 使用指南(三)
- 2025-01-04百万架构师第八课:设计模式:设计模式容易混淆的几个对比|JavaGuide