1.DOM结构:

DOM结构是以家族关系进行描述,一般描述的时候以父子兄弟描述就够了;

2.DOM元素的获取:

ID 选择器:性能最好的选择器
document.getElementById( 元素id );
DOM初识
DOM初识
标签选择器 : 获取到的是一个类数组,调用的时候需要用循环来调用
document.getElementsByTagName(“标签名”);
DOM初识
DOM初识
HTMLCollection 为了承载更多的元素
CSS 选择器/查询选择器:
document.querySelector(“选择器”);
DOM初识
DOM初识

3.DOM属性值获取

属性值一般存在 Key = “value”这种形式要想去除 value值需要用到
getAttribute(“需要查找的Key值”);
DOM初识
DOM初识

4.DOM向元素中添加内容

获取到这个元素之后该往元素中添加你想要的效果呢这就需要用到几个api
innerHTML:如果放入内容会直接被解析; 不会对标签进行特殊处理
DOM初识
DOM初识
innerText:如果放入的内容存在标签,那么这个标签会被转义;会对标签进行特殊处理;DOM初识
DOM初识
outerHTML:最硬的插入内容的方式;直接改变标签内容;
DOM初识
DOM初识

5.改变样式

cls.style 专门用来更改元素样式的;
cssText : 会把赋值的内容直接放在行内样式的style之中;
cls.style.cssText = “bacground-color : red;”; 这样可以覆盖原有的css样式
DOM初识
DOM初识DOM初识
两次 cssText 的设置只会保留后面设置,前面则不会保留;
使用cssText 一定要统一设置样式不要分批次设置样式;专门的工具,做专用的事;

最后根据这些知识可以做一个简单的表格隔行换色:
DOM初识
DOM初识
DOM初识

相关文章:

  • 2022-12-23
  • 2022-02-16
  • 2021-08-13
  • 2021-10-23
  • 2021-06-08
  • 2021-10-23
  • 2021-10-14
猜你喜欢
  • 2021-10-17
  • 2021-11-24
  • 2022-12-23
  • 2021-07-30
  • 2021-08-24
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案