欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM解读

程序员文章站 2022-03-26 22:26:23
DOM解读 DOM概念 - document object model:文档对象模型 操作文档的一套方法,document是一个对象,是dom的*对象,属于window的一个对象,并且可以说是最出色的一个儿子。 DOM元素的获取: document.getElementById("id名字") / ......

dom解读

 

dom概念 - document object model:文档对象模型

操作文档的一套方法,document是一个对象,是dom的*对象,属于window的一个对象,并且可以说是最出色的一个儿子。

dom元素的获取:

  1. document.getelementbyid("id名字") //根据id名字来获取标签;

  2. document.getelementbytagname("标签名") //根据标签名来获取;

  3. document.getelementbyclassname("类名") //根据类名来获取;

  4. document.getelementbyname("name的属性值") //根据name属性来获取;

  5. document.queryselector(css选择器) //根据css选择器来获取;

  6. document.queryselectorall(css选择器) //根据css选择器来获取所有满足条件的元素;

    //3、5、6在ie中不兼容

dom元素的操作:

内容操作:

  1. 元素.innertext //文本内容操作;

  2. 元素.innerhtml //带标签的内容操作;

  3. 元素.value //表单元素的内容操作(input类型)

  4. 元素.outtext //包含自身的标签;

  5. 元素.outhtml //包含自身的标签;

属性操作:

  1. 元素.getattribute("属性名") //获取属性的值,只能获取不能修改

  2. 元素.setattribute("属性名","属性值") //修改属性的值,相当于重新设置

  3. 元素.removeattribute("属性名") //删除属性

    //也可以直接通过"."来操作 元素.属性 = ""; //(通常不在标签上显示)

类名、样式操作:

  1. 元素.style.css(属性名) = "值";//设置样式;

  2. 元素.classname = "值"; //设置class类名;

  3. 元素.classname = ""; //清空class类名;

dom节点:

概念:组成html页面的所有内容,都叫做节点;

组成: //(元素、文本、注释、属性等节点)

元素节点:(主要介绍)

元素节点的获取:

  1. 元素.children //获取所有的子元素;

  2. 元素.firstelementchild //获取第一个子元素;

  3. 元素.lastelementchild //获取最后一个子元素;

  4. 元素.previouselementsibling //获取上一个兄弟元素;

  5. 元素.nextelementsibling //获取下一个兄弟元素;

  6. 元素.parentelement //获取父元素;

 

元素节点的操作:

var td = document.createelement('td'); //创建标签节点

插入节点:

父元素.appendchild(子元素) //在父元素最后追加;

父元素.insertbefore(新元素,旧元素) //将新的元素插入到指定的子元素前面;

删除节点:父元素.remove(子元素);

复制节点:父元素.clonenode(true);

//有true就会连标签里面的内容也复制出来,没有true只会复制空标签;

替换节点:父元素.replacechild(新元素,旧元素) //使用新的子元素替换掉旧的元素;

获取元素节点的样式:

window.getcomputedstyle(元素)

元素.currentstyle (ie兼容)

封装之后:

  1. function getstyle(ele,attr){

  2. if(window.getcomputedstyle){

  3. return window.getcomputedstyle(ele)[attr]

  4. }else{

  5. return ele.currentstyle[attr]

  6. }

  7. }

  8. var div = document.getelementsbytagname("div")[0];

  9. var w = getstyle(div,"width");

  10. console.log(w);

获取元素位置:

元素.offsetleft 元素.offsettop //这个就是于offsetparent的距离

元素.offsetparent //获取到定位是参考的那个设置过定位的父元素;

获取节点:

  1. 元素.childnodes //获取所有子节点;

  2. 元素.parentnode //获取父节点;

  3. 元素.firstchild //获取第一个子节点;

  4. 元素.lastchild //获取最后一个子节点;

  5. 元素.previoussibling //获取上一个兄弟节点;

  6. 元素.nextsibling //获取下一个兄弟节点;

节点属性:

节点属性 nodetype节点类型 元素节点1 文本节点3 注释节点8

nodename节点名称 元素节点大写的标签名 文本节点#text 注释节点#comment

nodevalue节点的值 元素节点null 文本节点文本内容 注释节点注释的内容

获取/设置滚动过的距离

有文档声明的时候 document.documentelement.scrolltop document.documentelement.scrollleft 没有文档声明的时候 document.body.scrolltop document.body.scrollleft

//做一个回到顶部的效果

获取浏览器大小

document.documentelement.clientwidth document.documentelement.clientheight //不包含滚动条的尺寸

获取html基本结构

document.documentelement是html标签 document.bodybody标签 document.headhead标签 document.titletitle标签