DOM操做笔记

时间  2019-12-05
标签 dom 笔记 栏目 HTML 繁體版
原文   原文链接

1、DOM简介

一、定义：

DOM 是 JavaScript 操做网页的接口，全称为“文档对象模型”（Document Object Model）。javascript

二、做用

它的做用是将网页转为一个 JavaScript 对象，从而能够用脚本进行各类操做（好比增删内容）。
浏览器会根据 DOM 模型，将结构化文档（好比 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。全部的节点和最终的树状结构，都有规范的对外接口。css

三、节点

DOM 的最小组成单位叫作节点（node）。文档的树形结构（DOM 树），就是由各类不一样类型的节点组成。
节点的类型有七种。html

  1. Document：整个文档树的顶层节点
  2. DocumentType：doctype标签（好比<!DOCTYPE html>）
  3. Element：网页的各类HTML元素（好比<body>）
  4. Attribute：网页元素的属性（好比class="right"）
  5. Text：标签之间或标签包含的文本
  6. Comment：注释
  7. DocumentFragment：文档的片断

在这里简单介绍，元素Element的构成：标签tag，文本content，属性Attributejava

clipboard.png

clipboard.png

四、节点树

全部节点造成的树状结构就是 DOM 树
浏览器原生提供document节点，document节点表明整个文档。
文档的第一层只有一个节点，就是 HTML 网页的第一个标签<html>，它构成了树结构的根节点（root node），其余 HTML 标签节点都是它的下级节点node

clipboard.png

2、document 对象

全部属性见Document 节点git

一、document 对象简介

每一个载入浏览器的HTML文档都会成为document对象。只要浏览器开始载入 HTML 文档，该对象就存在了，能够直接使用。
document对象包含了文档的基本信息，咱们能够经过JavaScript对HTML页面中的全部元素进行访问、修改。github

二、document 对象属性

document对象有不少属性来描述文档信息，在console台里面输出document.就会出现document所有的属性。数组

clipboard.png

如下为经常使用属性浏览器

三、 document.doctype

//<!DOCTYPE html>缓存

四、 document.title

五、 document.characterSet

//"UTF-8"

六、 document.head

七、 document.body

八、 document.readyState属性

返回当前文档的状态，共有三种可能的值
1）. loading：加载HTML代码阶段，还没有完成解析
2）. interactive：加载外部资源阶段
3）. complete：所有加载完成
演示一下，在html放入一章图片，调卡网络，刷新网页查看readystate的状态
clipboard.png
...]

clipboard.png

九、 document.location

location属性返回一个只读对象，返回的是当前文档的URL信息
clipboard.png

9.2 document.location的应用

// 在控制台输入该语句，会直接跳转到另外一个网址

  • document.location.reload(true)

// 当前页面会从新加载，并且优先从服务器从新加载

  • document.location.reload(false)

// 当前页面会从新加载，并且优先从本地缓存从新加载（默认值）

  • document.location.toString()

// 将location对象转为字符串，等价于document.location.href

十、document.open()、document.close()

document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档流，从新写入内容

document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就没法写入内容了。

clipboard.png

十一、document.write()

document.write方法用于向当前文档写入内容。
只要当前文档尚未用close方法关闭，它所写入的内容就会追加在已有内容的后面。
若是页面已经渲染完成关闭了，再调用write方法，它会先调用open方法，擦除当前文档全部内容，而后再写入
clipboard.png

咱们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。
关闭后，若是从新调用document.write()就会从新去打开一个新的文档流，并写入数据

3、选中Element的方式

dom的操做，分为两步：1是选择它，2是操做它

一、getElementById()

返回匹配ID属性的元素节点，若是没有发现匹配的节点，则返回null

var elem = document.getElementById("test")

二、getElementsByClassName()

返回一个相似数组的对象(HTMLCollection)，包括了全部class名字符合指定条件的元素

clipboard.png
咱们能够经过下标的方式去访问它，getElementsByClassName('center')[0]

clipboard.png

三、getElementsByTagName()

返回全部指定标签的元素

var paras = document.getElementsByTagName("p");

四、getElementsByName()

选择拥有name属性的HTML元素，返回一个NodeList格式的对象，不会实时反映元素的变化

<form name="x"></form>
var forms = document.getElementsByName("x");

clipboard.png

五、querySelector() ES5的新写法

像css同样选择元素（id用#，class用. ），只会选择一个元素，选择第一个元素。

六、querySelectorAll()

和querySelector()相似，不过querySelectorAll()返回的是知足条件的全部元素，也就是一个NodeList类型的对象

elementList = document.querySelectorAll(selectors)

querySelectorAll方法的参数，能够是逗号分隔的多个CSS选择器，返回全部匹配其中一个选择器的元素

4、建立元素

一、document.createElement(" ") 建立HTML元素节点

参数为元素的标签名，即元素节点的tagName属性。
建立了一个元素，建立的这个元素在虚拟的dom里面，只有把这个虚拟的dom放在页面，用户才能看得见

var newDiv = document.createElement("div")

二、document.createTextNode(" ")建立了一个文本节点

用来生成文本节点，参数为所要生成的文本节点的内容

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

三、document.createDocumentFragment()建立了一个DocumentFragment对象

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片断，可是不属于当前文档，经常用来生成较复杂的DOM结构，而后插入当前文档。
这样作的好处：由于DocumentFragment不属于当前文档，对它的任何改动，都不会引起网页的从新渲染，比直接修改当前文档的DOM有更好的性能表现。
举个例子解释
clipboard.png
刚才的代码会引发五次从新渲染，咱们生成一个内存片断，一次就搞定了,并且节省了一个标签

clipboard.png

var contain= document.querySelector('.classbar')
var fragment=document.createDocumentFragment()
for(var i=0;i<5;i++){
  var content =document.createElement('li')
  var text=document.createTextNode(i)
  content.appendChild(text)
 fragment.appendChild(content)
}
 contain.appendChild(fragment)

5、修改元素

一、appendChild()在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

二、insertBefore()在某个元素以前插入元素

var newdiv= document.createElement('div')
var newcontent= document.createTextNode('hhhhhhhh')
newdiv.insertBefore(newcontent,newdiv.firstChild)

三、replaceChild()把一个元素替换另一个元素

newDiv.replaceChild(newElement, oldElement)有两个参数：要插入的元素和要替换的元素
举个例子，源代码

clipboard.png

当咱们用第一个元素去替换最后一个元素以后

clipboard.png

四、removeChild()删除某个元素

var date =document.createElement('p')
 var text=document.createTextNode('ffff')
 date.appendChild(text)
 contain.appendChild(date)
 contain.removeChild(date)

五、clone元素

cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素自己

varnode.cloneNode(true)

6、属性的操做

一、getAttribute() 用于获取元素属性（attribute）的值

node.getAttribute('id');

二、createAttribute() 生成一个新的属性对象节点（不经常使用）

attribute = document.createAttribute(name);
//createAttribute方法的参数name，是属性的名称，好比id。

三、setAttribute()用于设置元素属性

var node = document.getElementById("div1");
node.setAttribute("id", "newVal");//属性名 ，属性值

四、romoveAttribute()用于删除元素属性

node.removeAttribute('id');

五、innerText

选择元素，使用innertext，输入的字符串会当成文本展现

document.querySelector('.classbar').innerText='<p>123<span>456</span></p>'

clipboard.png

六、innerHTML

选择元素，使用innerHtml，输入的字符串会当成html语句执行后展现

document.querySelector('.classbar').innerHTML='<p>123<span>456</span></p>'

clipboard.png
使用时要注意安全的问题，innerHTML内容不能由用户输入

7、修改css样式

一、修改style 属性

可修改元素的 style 属性，修改结果直接反映到页面元素
选中这个元素，使用style对象，就会出现该元素全部的css属性

clipboard.png
操做dom元素的style属性

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

clipboard.png

二、getComputedStyle获取元素计算后的样式

经过 node.style.属性 不能直接获取dom对象的style的值，必须使用getComputedStyle获取元素计算后的样式
clipboard.png
getComputedStyle是widow全局变量，
经过getComputedStyle(document.querySelector(".center"))能够获取(".center")这个dom元素全部的css属性值。
而后经过下标或者.来获取具体的属性值，注意能够用驼峰写法，来代替—链接字符。

clipboard.png
注意getComputedStyle是只读的属性，不能经过该属性来设置css属性

三、class 新增/删除/切换/判断操做

var nodeBox = document.querySelector('.box')
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

举个栗子

<style>
  .box{
  padding:10px;
  border:1px solid #ccc;
  box-shadow:1px 1px 2px 2px rgba(0,0,0,0.14);
}
.box.active{
  background:#000;
  color:#fff;
}
  </style>
</head>
<body>
<div class="box">
  <h1>hello</h1>
  <p>jirengu</p>
</div>
   <button id="add">add</button>
   <button id="remove">remove</button>
   <button id="toggle1">toggle1</button>
   <button id="toggle2">toggle2</button>
</body>
var toggle1btn=document.querySelector('#toggle1')
var toggle2btn=document.querySelector('#toggle2')
var addbtn=document.querySelector('#add')
var removebtn=document.querySelector('#remove')
var boxpanel=document.querySelector('.box')

addbtn.onclick=function(){boxpanel.classList.add('active')}

removebtn.onclick=function(){boxpanel.classList.remove('active')}

toggle1btn.onclick=function(){
  if(boxpanel.classList.contains('active')){
  boxpanel.classList.remove('active')  
  }else{
    boxpanel.classList.add('active') 
  }
}

toggle2btn.onclick=function(){
  boxpanel.classList.toggle('active')}

结果展现

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程