Dom详解

摘要：例子第三级的同级的第二个获取元素复制代码两个都包含的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。对象就是通过包装对象后产生的对象。

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

DOM 以树结构表达 HTML 文档。

根据id属性的值获取元素,返回来的是一个元素对象。 还有注意因为js区分大小写，所以写这个元素不能写错了，否者都得不到正确的结果。

document.getElementById("id属性的值");

根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByTagName("标签名字");

返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用document.getElementsByTagName("标签名字");

*document.getElementsByClassName("类样式的名字")
* 根据选择器获取元素,返回来的是一个伪数组*

document.getElementsByName("name属性的值")

根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

根据选择器获取元素,返回来的是一个元素对象

document.querySelector("选择器的名字");

document.querySelector`返回第一个匹配的元素，如果没有匹配的元素，则返回 null

语法

  var element = document.querySelector(selectors);

注意，由于返回的是第一个匹配的元素，这个api使用的深度优先搜索来获取元素。

例子：

  

    

      第三级的span    
    
  
  
            
    同级的第二个div
  
  


复制代码

两个class都包含“test”的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过querySelector获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。

根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

querySelectorAll()方法接受的参数，也是一个css选择器，返回的是所有匹配到的元素。返回的是一个NodeLIst的实例。

document.querySelectorAll("选择器的名字")

object.getAttribute(attribute)

setAttribute(attribute,value)

getAttribute()和setAttribute()方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。

这里有一个细节：通过setAttribute对文档做出修改之后，在通过浏览器查看源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在文档本身的源代码里，这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面的内容进行刷新却不需要再浏览器里面刷新。

由childNodes属性返回的数组包含所有类型的节点，而不仅是元素节点。 事实上，文档里几乎每一个东西都是一个节点，甚至连空格和换行都会被解释为节点，而他们也包含在childNodes属性返回的数组中.

firstChild和lastChild属性

firstChild 等价于 node.childNodes[0]

nodeType属性共有12种可取值，但只有3中具有实用价值。

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

nodeName 返回当前节点的节点名称 节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本

nodeValue 返回或设置指定节点的节点值。 标签---null,属性--属性的值,文本--文本内容

ps: 对于元素节点nodeName 中保存的始终是元素的标签名 大写的标签--标签， nodeValue保存的值始终是NULL

我是p里面的value

怎获取p标签里的文本？

document.querySelector("p").childNodes(0).nodeValue

ps: 在编写DOM脚本时，你会理所当然的认为某个节点肯定是一个元素节点，这是一种相当常见的错误。如果没有100%的把握，就一定要检查nodeType属性值。有很多DOM方法只能用于元素节点，如果用在文本节点身上，就会出错。

document.write("标签的代码及内容");
document.write(‘新设置的内容

标签也可以生成

缺点： 违背了“行为与表现分离”的原则

...

及支持读取，也支持写入，它不仅可以用来读取HTML内容，还可以用它把HTML内容写入元素。

对象.innerHTML="标签及代码";
var box = document.getElementById("box");
box.innerHTML = "新内容

新标签

innerHTML 会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素的所有子节点。

document.createElement("标签的名字");

//创建元素 这个方法只能创建元素节点，这个节点是空白的。

//document.createElement("标签名字"); 对象 //把元素追加到父级元素中

var div = document.createElement("div");

document.body.appendChild(div);

创建文本节点

document.createTextNode("Hellow world")

在已有元素前插入一个新元素

parentElement.inserBefore(newElement, targetElement)

(1)新元素: 你想插入的元素 (newELement)

(2)目标元素：你想把这个新元素插入到哪个元素(targetElement)之前

(3)父元素：目标元素的父元素(parentElement)

文档中的每一个元素都是一个对象，每一个对象都有各种各样的属性。 每个元素节点都有一个style属性。 style属性包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象里。

element.style

element.style.fontFamily

当你需要引用一个中间带减号的css属性时，DOM要求你用驼峰命名法。 css属性font-family 用fontFamily

element.style.border = "1px solid red"

要确定某个元素的计算样式(包括应用给它的所有css规则)，可以用这个方法

最重要的一条是要记住所有计算的样式都只是可读的；不能修改计算后样式对象的css属性。

window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。

1: window.getComputedStyle("元素", "伪类");

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:before”） 。如果不需要伪元素信息，第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

1: var ele = document.getElementById("ele");

2: var styles = window.getComputedStyle(ele,null);

3: styles.color; //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法，需要使用后面的方法。对于Firefox和Safari，会把颜色转换成rgb格式。

总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

//总结:innerHTML是可以设置文本内容 //

总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

//获取的时候: //innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取

//innerHTML才是真正的获取标签中间的所有内容*

结论: //如果想要(获取)标签及内容,使用innerHTML //如果想要设置标签,使用innerHTML //想要设置文本,用innerText,或者innerHTML,或者textContent*

ps: innerText 成对的标签都可以用这个改变值

​

,应该使用offset系列来获取

/*

*

* offset系列:获取元素的宽,高,left,top, offsetParent

* offsetWidth:元素的宽,有边框

* offsetHeight:元素的高,有边框

* offsetLeft:元素距离左边位置的值

* offsetTop:元素距离上面位置的值

*

* scroll系列:卷曲出去的值

* scrollLeft:向左卷曲出去的距离

* scrollTop:向上卷曲出去的距离

* scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框

* scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

*

* client系列:可视区域

* clientWidth:可视区域的宽(没有边框),边框内部的宽度

* clientHeight:可视区域的高(没有边框),边框内部的高度

* clientLeft:左边边框的宽度

*clientTop :上面的边框的宽度

没有脱离文档流:

offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin

脱离文档流了

主要是自己的left和自己的margin

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM``对象与jQuery对象的方法不能混用。

· jquery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jquery的方法

1.jQuery对象属于js的数组；

2.jQuery对象是通过jQuery包装的DOM对象后产生的;

3.jQuery对象不能使用DOM对象的方法和属性

4.DOM对象不能使用jQuery对象的方法和属性

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
 
DOM对象转jquery对象
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

$("li").css({//对象 所以可以添加多个样式

"background-color","fff";

"color","rga(0,0,0)";

//

});

 

addClass(name);

//给所有的div添加one的样式

$("div").addClass("one");

removeClass();

//移除div中one的样式类名

$("div").removeClass("one");

$("div").hasClass("one"); 

判断div是否有one的样式

 

 

$(function(){

$("input").eq(0).click(function(){

$("li").addClass("bigger");   //在原来的基础上再给我加上名为bigger的一个类。

});

})

$("li").removeClass("bigger")   //移除一个名为bigger的css类.

         hasClass("类名")  // 判断类返回true，fasle；

         toggleClass("类名")  //切换类

 

    /*js原生用getAttribute("样式名")获得样式属性 setAttribute("样式名","样式属性")*/

$("img").attr("attr","xx值")  

({

    "attr":"xx";

    "attr":"xx";

    "attr":"xx";

})

也可以获得样式的值

/*对于返回布尔值的属性  用prop*/

show() //不传参数，只有显示功能，无动画

show([speed],[callback]) //speed动画持续的时间 单位毫秒

​ //callback 回调函数 动画执行完执行该函数

hide() 隐藏

slideUp() 上滑 slideDown() 下滑 slideToggle() 切换滑入滑出

淡入：fadeIn() 淡出fadeOut()

fadeTo(duration,opacity) duration时间 opacity 0~1 透明度

自定义动画

animate(css属性,[duration],[easing],[callback])

​ {width:100%, {swing:秋千，摇摆速度

​ heigth:100%} linear:匀速 }

动画队列 .animate({left:500px}).animate({top:500px}).animate({}).

​ 一个一个挨个执行

​

添加节点

$("div").append($("p"));    添加到父节点里 最后面

$("p").appendTo($("div"));  把子元素添加到父元素里面（最后）  //preappend 添加到最前面

$("p").after($("p"));  兄弟元素后面   (before)

 

清空一个元素的内容

$("div").empty();     $("div").html(" ");//这个会引发内存泄漏

移除一个元素              

$("div").remove();

克隆一个元素

$("div").clone([bool]) //false:默认值 不会复制事件  true：会复制事件

$("
") 创建了一个li

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();
 

html方法相当于innerHTML text方法相当于innerText

//``设置内容
$(“div”).html(“这是一段内容”);
//``获取内容
$(“div”).html()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

救命稻草, 前端框架就是为了减少DOM操作，但是特定情况下，也给你留了后门

在指定的元素上，添加ref="名称A"

在获取的地方加入 this.$refs.名称A

如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象

可以直接操作

如果ref放在了组件对象上，获取的就是组件对象

1:获取到DOM对象,通过this.$refs.sub.$el,进行操作

对应的事件

created 完成了数据的初始化，此时还未生成DOM，无法操作DOM

mounted 将数据已经装载到了DOM之上,可以操作DOM

参考博客