乐趣区

Dom详解

jiezi

DOM

JavaScript 的组成

组成部分 说明
Ecmascript 描述了该语言的语法和基本对象
DOM 描述了处理网页内容的方法和接口
BOM 描述了与浏览器进行交互的方法和接口

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

DOM 以树结构表达 HTML 文档。

获取元素

getElementById

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

document.getElementById(“id 属性的值 ”);

getElementsByTagName

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

document.getElementsByTagName(“ 标签名字 ”);

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

getElementsByClassName

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

getElementsByName

document.getElementsByName(“name属性的值 ”)

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

querySelector

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

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

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

语法

  var element = document.querySelector(selectors);

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

例子：

<body>
  <div>
    <div>
      <span class="test"> 第三级的 span</span>    
    </div>
  </div>
  <div class="test">            
    同级的第二个 div
  </div>
  <input type="button" id="btnGet" value="获取 test 元素" />
</body>
<script>
  document.getElementById("btnGet").addEventListener("click",function(){var element = document.querySelector(".test");
    alert(element.textContent);
  })
</script>
复制代码

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

querySelectorAll

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

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

document.querySelectorAll(“ 选择器的名字 ”)

获取和设置属性

getAttribute

object.getAttribute(attribute)

setArribute

setAttribute(attribute,value)

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

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

Node

childNodes 属性

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

firstChild 和 lastChild 属性

firstChild 等价于 node.childNodes[0]

nodeType 属性

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

元素节点 的 nodeType 属性值是 1

属性节点 的 nodeType 属性值是 2

文本节点 的 nodeType 属性值是 3

nodeName 和 nodeValue

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

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

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

<p> 我是 p 里面的 value</p>

怎获取 p 标签里的文本？

document.querySelector(“p”).childNodes(0).nodeValue

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

元素创建

document.write

document.write(“ 标签的代码及内容 ”);
document.write(‘新设置的内容 <p> 标签也可以生成 </p>’);
document.write()创建元素缺陷: 如果是在页面加载完毕后, 此时通过这种方式创建元素, 那么页面上存在的所有的内容全部被干掉

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

<body>
<script>
  document.write("<p>hhh 我是 p 标签 </p>")
</script>
...
</body>

innerHTML

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

对象.innerHTML=” 标签及代码 ”;
var box = document.getElementById(‘box’);
box.innerHTML = ‘ 新内容 <p> 新标签 </p>’;

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

createElement 和 appendChild

document.createElement(“ 标签的名字 ”);

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

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

var div = document.createElement(‘div’);

document.body.appendChild(div);

createTextNode

创建文本节点

document.createTextNode(“Hellow world”)

insertBefore

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

parentElement.inserBefore(newElement, targetElement)

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

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

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

运用 dom 设置样式

style 属性

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

element.style

element.style.fontFamily

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

element.style.border = “1px solid red”

getComputedStyle()

要确定某个元素的计算样式(包括应用给它的所有 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 格式。

相关扩展

innerHTML 与 innerText

总结: 如果使用 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

Jquery DOM 操作

jQuery 对象与 DOM 对象的区别

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 的方法

Jquery 对象与 js 对象的区别

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

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

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

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

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 对象

添加 css 样式


$("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("类名")  // 切换类

 

<!-- 样式：在 style 里面写的，用 css 来操作 -->

添加属性


<!-- 属性：在标签里面写的，用 attr 来操作 -->    /*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></li>") 创建了一个 li

jQuery 特殊属性操作

1.1. val 方法

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

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

1.2. html 方法与 text 方法

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

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

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

vue 的 DOM 操作

  • 救命稻草, 前端框架就是为了减少 DOM 操作，但是特定情况下，也给你留了后门
  • 在指定的元素上，添加 ref=” 名称 A ”

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

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

      • 可以直接操作

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

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

    • 对应的事件

      • created 完成了数据的初始化，此时还未生成 DOM，无法操作 DOM
      • mounted 将数据已经装载到了 DOM 之上, 可以操作 DOM

参考博客

退出移动版