后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > 开发类 > Web开发Web开发

JavaScript 10 DOM

2021-06-07 21:03:13Web开发人已围观

简介获取标签属性和内容 DOM对象将标签的属性和内容封装成了对象的属性 <div id = "div">我是一个div <span>我是span</spa

获取标签属性和内容

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转义符:

"  &quot;

,  &apos;

&  &amp;

<  &lt;

>  &gt;

空格  &nbsp;

判断一个属性是否存在:

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');

文章来源:https://www.cnblogs.com/xiaoyuheng/archive/2021/06/05/14853605.html

Tags:

很赞哦! ()

后台-插件-广告管理-内容页广告位二(手机)

相关文章

后台-插件-广告管理-内容页广告位三(手机)
后台-插件-广告管理-内容页广告位四(手机)

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计60359篇文章
  • 浏览统计4607次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们