盒子
盒子
文章目录󰁋
  1. 附录:思维导图总结

JavaScript语言基础之DOM操作(九)

DOM 操作

  • 图片切换的相册效果
  • tab切换效果
  • 表单验证
  • 特效就是DOM操作的具体应用 DOM操作就是用js来写HTML代码

  • 节点/元素/标签:

    • 三种常用的节点类型:

      • 元素节点
      • 属性节点
      • 文本节点
  • 操作DOM对象:

    • 修改:–找到这个节点
    • 删除:–找到这个节点
    • 添加:–先造出一个节点 然后插入 插入到哪里?找节点来定位
  • 这些都离不开节点的查找

  • 节点的查找:(最重要)

    • 1、document.getElementById—根据id查找节点 [返回的是节点本身]
    • 2、document.getElementsByTagName–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
    • 3、document.getElemenstByName–根据name属性来查找节点(一般用在表单中)[返回的是数组]document.getElemenstByName[i]`
  • 注意:早期浏览器都认为name只出现在表单中

  • 因此document.getElemenstByName只对表单中的元素发挥作用 后来部分浏览器把Name属性扩展到一般的元素 如:div 但是IE浏览器还是只能对表单使用byName因此处于兼容性 我们只能对表单使用byName

  • DOM中查找节点的思路:(由大到小 个别情况 由子到父)

    • 由大到小:(通过下面的来定位)

      • 1、document.getElementById—根据id查找节点 [返回的是节点本身]
      • 2、document.getElementsByTagName–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
      • 3、document.getElemenstByName–根据name属性来查找节点(一般用在表单中)[返回的是数组]document.getElemenstByName[i]
  • 如果还没有查到自己想要的节点,还可以继续根据上面已经找到的节点再次定位来查找

  • 怎么继续定位?

    • 答案:childNodes/child
  • 继续查找:

  • 1、查找子元素 children[index]/childNodes

  • 2、查找父元素 node.parentNode –>获取父元素

  • 3、查找兄弟元素 nextSibling previousSibling

  • 4、nextSibling previousSibling firstChild lastChild这四个属性容易受到空白文本的影响 建议不用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//============给Object原型加一个方法 消除文本节点对DOM操作的影响 例如:nextSibling` `previousSibling` `firstChild` `lastChild (受到换行 和文本节点影响)

Object.prototype.next = function(){
//NodeType == 3 text的代号
//NodeType == 1 tag的代号
if(this.nextSibling){//判断下一个兄弟节点是否存在
switch(this.nextSibling.nodeType){
case 1:
return this.nextSibling;
case 3:
return this.nextSibling.nextSibling;
}
}else{
return null;
}
console.log(div1.next().next().innerText);
  • 5、对于查到的某个元素里面的子元素非常多 这时候还可利用getElementsByTagname进一步筛选

注意:对于元素对象和document对象相比 元素对象只能利用getElementsByTagName函数 其他两个不能用

  • 节点查找也是通过由大到小来定位:找到大的元素进一步细化 完全可以找到页面上任意一个元素控制他

  • 子元素 不好找 就找他的父元素

  • 要过滤空白文本节点,用children取他的文本节点

  • DOM与节点的关系:

    • node:

      • childNodes[]
      • parentNode
      • firstChild
      • getElementsByTagName('元素标签')
      • lastchild
      • nextSibling
      • previousSibling

      • children[index] children 不是w3c标准 但是各大浏览器兼容性很好


通过给原型添加方法在元素后面创建标签

启示:在项目中,很多很多地方都需要一个方法但是系统没提供,这时可以通过原型扩展

1
2
3
4
5
6
7
8
9
10
11
12
//var p = document.createElement('p');
//p.innerHTML = "this is a p";
//var child = document.getElementsByTagName('div');

//给Div的HTMLDivElement构造器原型加一个创建元素的方法 要所有的元素都有这个方法 改成 Object
HTMLDivElement.prototype.createElement = function(tagName){
var child = document.createElement(tagName);
this.appendChild(child);
return child;
}
var child = document.getElementsByTagName('div')[2].createElement("p");
child.innerHTML = 'pppppp';

附录:思维导图总结

支持一下
扫一扫,支持poetries