DOM操作笔记

一、DOM简介

1、定义:

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。

2、作用

它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。 浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。

3、节点

DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。 节点的类型有七种

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

在这里简单介绍,元素Element的构成:标签tag,文本content,属性Attribute

4、节点树

所有节点形成的树状结构就是 DOM 树 浏览器原生提供document节点,document节点代表整个文档。 文档的第一层只有一个节点,就是 HTML 网页的第一个标签<html>,它构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点

二、document 对象

所有属性见Document 节点

1、document 对象简介

每个载入浏览器的HTML文档都会成为document对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。 document对象包含了文档的基本信息,我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

2、document 对象属性

document对象有很多属性来描述文档信息,在console台里面输出document.就会出现document全部的属性。

以下为常用属性

3、 document.doctype

//<!DOCTYPE html>

4、 document.title

5、 document.characterSet

//"UTF-8"

6、 document.head

7、 document.body

8、 document.readyState属性

返回当前文档的状态,共有三种可能的值 1). loading:加载HTML代码阶段,尚未完成解析 2). interactive:加载外部资源阶段 3). complete:全部加载完成 演示一下,在html放入一章图片,调卡网络,刷新网页查看readystate的状态

...]

9、 document.location

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

9.2 document.location的应用

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

  • document.location.reload(true)

// 当前页面会重新加载,而且优先从服务器重新加载

  • document.location.reload(false)

// 当前页面会重新加载,而且优先从本地缓存重新加载(默认值)

  • document.location.toString()

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

10、document.open()、document.close()

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

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

11、document.write()

document.write方法用于向当前文档写入内容。 只要当前文档还没有用close方法关闭,它所写入的内容就会追加在已有内容的后面。 如果页面已经渲染完成关闭了,再调用write方法,它会先调用open方法,擦除当前文档所有内容,然后再写入

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

三、选中Element的方式

dom的操作,分为两步:1是选择它,2是操作它

1、getElementById()

返回匹配ID属性的元素节点,如果没有发现匹配的节点,则返回null

var elem = document.getElementById("test")

2、getElementsByClassName()

返回一个类似数组的对象(HTMLCollection),包括了所有class名字符合指定条件的元素

我们可以通过下标的方式去访问它,getElementsByClassName('center')[0]

3、getElementsByTagName()

返回所有指定标签的元素

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

4、getElementsByName()

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

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

5、querySelector() ES5的新写法

像css一样选择元素(id用#,class用. ),只会选择一个元素,选择第一个元素。

6、querySelectorAll()

和querySelector()类似,不过querySelectorAll()返回的是满足条件的所有元素,也就是一个NodeList类型的对象

elementList = document.querySelectorAll(selectors)

querySelectorAll方法的参数,可以是逗号分隔的多个CSS选择器,返回所有匹配其中一个选择器的元素

四、创建元素

1、document.createElement(" ") 创建HTML元素节点

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

var newDiv = document.createElement("div")

2、document.createTextNode(" ")创建了一个文本节点

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

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

3、document.createDocumentFragment()创建了一个DocumentFragment对象

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。 这样做的好处:因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。 举个例子解释

刚才的代码会引起五次重新渲染,我们生成一个内存片段,一次就搞定了,而且节省了一个标签

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)

五、修改元素

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

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

2、insertBefore()在某个元素之前插入元素

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

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

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

当我们用第一个元素去替换最后一个元素之后

4、removeChild()删除某个元素

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

5、clone元素

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

varnode.cloneNode(true)

六、属性的操作

1、getAttribute() 用于获取元素属性(attribute)的值

node.getAttribute('id');

2、createAttribute() 生成一个新的属性对象节点(不常用)

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

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

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

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

node.removeAttribute('id');

5、innerText

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

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

6、innerHTML

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

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

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

七、修改css样式

1、修改style 属性

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

操作dom元素的style属性

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

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

通过 node.style.属性 不能直接获取dom对象的style的值,必须使用getComputedStyle获取元素计算后的样式

getComputedStyle是widow全局变量, 通过getComputedStyle(document.querySelector(".center"))可以获取(".center")这个dom元素所有的css属性值。 然后通过下标或者.来获取具体的属性值,注意可以用驼峰写法,来代替—连接字符。

注意getComputedStyle是只读的属性,不能通过该属性来设置css属性

3、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')} 

结果展示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax笔记

    本文主要是我学习ajax的笔记,不涉及到原理,只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpRequest...

    bamboo
  • js函数、作用域和闭包

    2.1 用function命令声明函数 function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数,函数体放在大括号里面

    bamboo
  • css-浮动

    一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边...

    bamboo
  • JavaScript基础学习--零碎

    1、如果WINDOW对象是常规HTML页面,TOP就是SELF       var top = document.getElementById('top'); ...

    用户1148399
  • javaScript的常见document对象

    对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 docume...

    botkenni
  • 干货丨JS 经典实例收集整理

    一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件    function addEvent(obj,type,fn){        if(obj.a...

    腾讯NEXT学位
  • JS代码实现浏览器网页标题的动态切换,略微提高网站粘性

    前几天在微饭天空看到一个让我眼前一亮的分享,自己拿过来用了几天之后,感觉挺有意思,现在我略微改进一下并分享出来,方便更多人自定义成自己喜欢的内容。 ? 一、原...

    张戈
  • JavaScript危险函数 - HTML操作

    1. HTML操作函数简介  当一个方法或操作允许HTML操作,如果有可能控制(甚至部分)参数,则可能在某种程度上操纵HTML,从而获得对用户界面的控制...

    奶糖味的代言
  • Web前端学习 第3章 JavaScript基础教程14 DOM基础

    我们可以通过DOM提供的querySelector方法来获取元素,然后进一步操作它的样式 示例代码如下:

    学习猿地
  • async-for-js

    插入3个div元素,其中第二个div元素使用setTimeout模拟异步操作,理想的插入顺序为div1 div2 div3,但这里的代码的插入顺序为div1 d...

    littlelyon

作者介绍

精选专题

活动推荐

扫码关注云+社区

领取腾讯云代金券