DOM及DOM相关操作
DOM
概述:
DOM 全称(document object model)文档对象模型(文档指定为对应html文档),对应的DOM就是操作HTML文档的(增删改查)
DOM结构
document 文档对象
方法
1.获取全局的内容
document.getElementById() //通过id属性来获取元素,返回的是一个元素 (Element)
//通过id获取对应的元素
var box = document.getElementById('box')
console.log(box);
document.getElementsByClassName() //通过class属性名来获取元素 ,返回是一个伪数组(HTMLCollection)
// (length 下标) 所有的伪数组都具备的
//通过class属性获取
var content = document.getElementsByClassName('content')
console.log(content);
console.log(content[0]); //访问第一个获取的元素
document.getElementsByTagName() //通过标签名获取元素 返回的是一个伪数组 (HTMLCollection)
//通过标签名获取
var div = document.getElementsByTagName('div')
console.log(div);
document.getElementsByName() //通过name属性来获取元素 返回的是一个伪数组 (NodeList)
//通过name属性获取
var jack = document.getElementsByName('jack')
console.log(jack);
console.log(jack[0]);
document.querySeletorAll() //通过对应的选择器进行获取,返回的是一个伪数组 (NodeList)
//通过选择器获取
var divs = document.querySelectorAll('div') //传入的选择器为div
console.log(divs);
document.querySeletor() //通过选择器获取元素 ,返回的是第一个查找到的元素 (Element)
//通过选择器获取第一个元素
var first = document.querySelector('div')
console.log(first);
document.getRootNode() //获取根节点
console.log(document.getRootNode()); //获取根节点
2.创建全局的内容
创建元素 document.createElement() 返回的是一个元素
//创建的方法
var p = document.createElement('p') //传入的是一个对应的标签名
console.log(p);
创建属性节点 document.createAttribute() 返回的是一个属性对象
//创建属性的方法
var attr = document.createAttribute('password') //创建的是一个属性 默认为空值
//给属性对象赋属性值的操作
attr.value = '123456'
console.log(attr);
创建文本节点 document.createTextNode() 返回的是一个文本节点对象
//创建文本
var text = document.createTextNode('显示内容') //创建一个文本节点对象
console.log(text);
//后面带NS表示的是命名空间 内声明或获取
属性
- document.head //获取head标签
- document.body //获取body标签
- document.forms //获取所有的表单标签 返回的是一个HTMLCollection
..
Element 元素对象
方法
1.获取元素 (document的相关方法 element也可以使用)
var element = document.getElementById('box')
console.log(element.getElementsByTagName('img'));
2.替换元素(replace)
replaceChild (用一个新的元素来替换里面的子元素)
replaceChildren (用一个元素来替换里面所有的子元素)
div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点
var content = document.createElement('div')
div.replaceChildren(content) //替换所有的子节点 用传入的节点替换里面所有的子节点
//replaceChild 用前面的替代后面的(一定是属于我们本身的儿子元素)
var a = document.createElement('a')
div.replaceChild(a,div.children[0]) //使用新的节点来替换对应的子节点 使用a这个元素来替代对应的content这个子元素
3.插入元素 (插入对应的子元素)
append 插入任意的子元素到对应的父元素内 插入到后面
appendChild 插入一个子元素到对应的父元素内容 插入到后面
insertBefore 插入一个元素到另一个子元素的前面
// 插入元素 append inster
div.append("hello",content) //追加内容到当前元素里面的最后一个元素的后面 追加多个
// appendChild 追加子元素
var b= document.createElement('b')
div.appendChild(content) //追一个元素在当前元素的里面 (同一个元素只能允许加一次 里面存在是不可以添加的)
div.appendChild(b) //追一个元素在当前元素的里面
//insertBefore
var span = document.createElement('span')
//参数1 当前需要插入的元素 参数2 对应的子元素
div.insertBefore(span,div.children[0]) //插入到哪个子元素的前面
4.删除元素
div.remove() //全部删除 包括自己
// 清空所有的内容 使用replaceChildren('')
5.cloneNode 方法
var cloneDiv = div.cloneNode() //进行元素克隆
console.log(cloneDiv); //只会克隆自己 并不会克隆里面包含对应的内容
var div1 = div.cloneNode(true) //里面是true的情况表示深度克隆 他会考虑所有的内容包括事件
console.log(div1);
6.对于的属性的操作方法
setAttribute
//element.setAttribute(name,value)
//不仅可以操作 后续定义的属性 也可以操作本身就有的属性
var box = document.querySelector('div')
box.setAttribute('width','100px')
getAttribute
//element.getAttribute(name)
box.setAttribute('username','tom')
console.log(box.getAttribute('width'));//返回对应的值 一般都是string
console.log(box.getAttribute('username'));//返回对应的值 一般都是string
removeAttribute
//element.removeAttribute(name)
box.removeAttribute('width')
属性
只读属性
获取父元素
// 相关属性
var div = document.getElementsByTagName('div')[0]
// 获取父元素
console.log(div.parentElement);//body
获取子元素
// 获取子元素
console.log(div.childElementCount); //子元素个数
console.log(div.children); //获取子元素 (伪数组)
获取兄弟元素
前面的兄弟
// 获取兄弟元素
// 前一个兄弟 (pre表示前面的)
console.log(div.previousElementSibling);
后面的兄弟
// 后一个兄弟 (next表示后面)
console.log(div.nextElementSibling)
所有的元素都具备的属性
className
// className 获取对应的class名字
console.log(div.className);
div.className = 'abc'
id
//id 属性 获取对应的id
console.log(div.id); //空值
div.id = "box"
style
//元素的其他属性 所有元素都有的属性
console.log(div.style); //相当于获取div里面style属性 内嵌样式 对象(只能读取style里面设置的)
console.log(div.style.width); //style里面设置的 100px
console.log(div.style.height); //"" 不是style属性设置的不能读取
// 可写的属性 style的用户 element.style.样式名 赋值就是给设置 不赋值就是获取
div.style.backgroundColor = 'red'
title
//title 标题
console.log(div.title);
div.title = "hello"
name
// name属性
console.log(div.name)
tagName(只读属性)
//tagName 大写的字符串 只读属性
console.log(div.tagName);
innerHTML 及 innerText
//innerHtml 显示的html(所有) innerText 显示的文本(所有的文本)
console.log(div.innerHTML);
console.log(div.innerText);
div.innerHTML = "<b>hello</b>" //解析html代码的
div.innerText = "<b>hello</b>" //不会解析html代码的
attributes 获取所有的属性节点 (返回的是一个NameNodeMap)
console.log(ele.attributes);//nameNodeMap 伪数组 (key:value) 迭代器
console.log(ele.attributes.length)
//访问
console.log(ele.attributes[0]) //属性节点对象
console.log(ele.attributes['href'].nodeValue)
console.log(ele.attributes['href'].value)
for(var key in ele.attributes){ //字符串
console.log(ele.attributes[key]);
}
// nameNodeMap的方法getNameItem setNameItem removeNameItem item
//其中一个属性对象
console.log(ele.attributes.getNamedItem('hello'));
//设置
var attr1 = document.createAttribute('abc') //属性节点
attr1.value = 'bca'
ele.attributes.setNamedItem(attr1)
//remove属性
ele.attributes.removeNamedItem('href')
// item 获取属性对象
console.log(ele.attributes.item(0));
每个元素默认带的属性 都可以通过对应的元素直接点出来
如 a标签的href的属性 input的value属性 img的src属性等
//所有元素对于本身自带属性都直接点出来
var input = document.querySelector('input')
console.log(input.placeholder);
input.placeholder = "请输入"
console.log(input.value);
console.log(input.type);
var a = document.querySelector('#a')
console.log(a.href);
var img = document.querySelector('img')
console.log(img.src);
节点操作
节点分类
元素节点 (element)
属性节点 (attribute)
文本节点 (text)
节点相关属性
parentElement 父元素(只能是element)
parentNode 父节点 (一般也是element)
childNodes 子节点 (伪数组 (nodeList)文本节点及元素节点)
children 子元素节点 (HTMLCollection element)
previousElementSibling 上一个兄弟元素节点 (element 元素节点)
previousSibling 上一个兄弟节点 (文本节点 元素节点)
nextElementSibling 下一个兄弟元素节点 (element 元素节点)
nextSibling 下一个兄弟节点 (文本节点 元素节点)
lastChild 最后一个子节点 (文本节点 元素节点)
firstChild 第一子节点 (文本节点 元素节点)
一般形式下 只有删了空文本节点才进行第一个和最后一个的获取
var ul = document.querySelector('ul')
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType == 3 && /^\s+$/.test(ul.childNodes[i].nodeValue)){
//删除子节点
ul.removeChild(ul.childNodes[i])
}
}
console.log(document.querySelector('ul').firstChild);
console.log(document.querySelector('ul').lastChild);
空文本 空格换行及制表符都是空文本节点
节点分类的区分属性
nodeType 节点类型 (1表示元素节点 2表示属性节点 3表示文本节点)
nodeValue 节点值 (元素节点的节点值获取不到(null) 属性节点的节点值 属性值 文本节点 文本内容)
nodeName 节点名 (元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text)
var tagA = document.createElement('a') //元素节点
tagA.innerHTML = "hello"
var attr = document.createAttribute('name') //属性节点
attr.value = '张三'
var text = document.createTextNode('你好') //文本节点
//nodeName 节点名 元素的节点名是大写的 属性节点节点名小写 文本节点都是#text (只读属性)
console.log(tagA.nodeName,attr.nodeName,text.nodeName);// A name #text
console.log(tagA.nodeType,attr.nodeType,text.nodeType);// 1 2 3
console.log(tagA.nodeValue,attr.nodeValue,text.nodeValue);// null 张三 你好
相关的方法
cloneNode 方法 (克隆所有节点)
append 添加节点
appendChild 添加节点
replaceChild 替换节点
replaceChildren 替换所有的子节点
insertBefore 插入节点
removeChild 移除子节点
属性节点操作的相关方法
setAttributeNode 设置属性节点
getAttributeNode 获取属性节点
removeAttributeNode 删除属性节点
//setAttributeNode getAttributeNode removeAttributeNode
console.log(ele.getAttributeNode('abc')); //返回属性节点对象
var attr2 = document.createAttribute('abc') //属性节点
attr2.value = '123456'
ele.setAttributeNode(attr2) //同样的属性名会被覆盖
var attr3 = document.createAttribute('abc') //属性节点
attr3.value = '123456' //由于attr3和attr2不是一个对象 所有他的地址不一样 所以比对不成功所以不能被删除
// var attr3 = attr2 //attr3的地址和attr2的是一样这个时候就可以删除了
ele.removeAttributeNode(attr3) //删除对于的属性节点
this 调用者是谁就指向谁
//生成对应的元素 加入某个地方
//个数 标签名 父元素
var arr = [0,1,2,3,4,5,6,7,8,9,'+',"-","*",'/']
function initElement(tagName,parent,valueArr){
for(var i=0;i<valueArr.length;i++){
var element = document.createElement(tagName)
element.innerText = valueArr[i]
parent.appendChild(element)
}
}
var box = document.querySelector('div')
initElement('button',box,arr)
//dom操作会影响页面的渲染速度(重复多次的渲染)(重绘和回流)
//获取所有的按钮
var btns = document.querySelectorAll('button')
//遍历这个按钮组
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
// console.log(i); 14
// console.log(btns[i].innerText);
console.log(this.innerText); //指向对应的点击的按钮
}
}
//点击事件是异步 先走同步 再走异步
DOM及DOM相关操作的更多相关文章
- 使用Dom解析器,操作XML里面的信息
import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...
- 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- DOM的查找与操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- BOM与DOM之DOM操作
目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...
- React v16-alpha 从virtual dom 到 dom 源码简读
一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(一)
对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...
- Virtual DOM 虚拟DOM的理解(转)
作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
随机推荐
- Python模块Ⅰ
Python模块Ⅰ part1 模块的定义/取别名 自定义模块 什么是模块:模块的本质就是.py文件,封装语句的最小单位 模块中出现的变量,for循环,if结构,函数定义...称为模块成员 模块的运行 ...
- LC T668笔记 & 有关二分查找、第K小数、BFPRT算法
LC T668笔记 [涉及知识:二分查找.第K小数.BFPRT算法] [以下内容仅为本人在做题学习中的所感所想,本人水平有限目前尚处学习阶段,如有错误及不妥之处还请各位大佬指正,请谅解,谢谢!] !! ...
- 云开发中的战斗机 Laf,让你像写博客一样写代码
各位云原生搬砖师 and PPT 架构师,你们有没有想过像写文章一样方便地写代码呢? 怎样才能像写文章一样写代码? 理想的需求应该是可以在线编写.调试函数,不用重启服务,随时随地在 Web 上查看函数 ...
- 图解MySQL逻辑备份的实现流程
1. 摘要 数据作为一家公司的重要资产,其重要程度不言而喻.数据库为数据提供存取服务,担任着重要的角色,如果因数据误删.服务器故障.病毒入侵等原因导致数据丢失或服务不可用,会对公司造成重大损失,所以数 ...
- 『忘了再学』Shell基础 — 32、Shell中test测试命令详解
目录 1.test测试命令 (1)test命令介绍 (2)test命令使用方式 (3)示例 2.按照文件类型进行判断 3.按照文件权限进行判断 4.两个文件之间进行比较 5.两个整数之间比较 6.字符 ...
- 机器学习中 TP FP TN FN的概念
二分类 在二分类问题中,TP FP TN FN 是非常清楚且易于理解的. TP (True Positive) : 预测为 1 ,真实值也为 1 -> 真阳性 FP (False Positiv ...
- node线上项目连接mysql出现 504 Gateway Time-Out
var connection = mysql.createConnection({host : 'localhost',user : 'root',password : '123456',port: ...
- SAP -熟练使用T-Code SHD0
SHD0 业务顾问和开发顾问都非常熟悉的一个T-Code, 如果能合理使用它,可以省去许多增强和程序修改工作. 当我需要时,我在这里找不到任何相关文档,这就是为什么我想借此机会向我们自己的SCN提供内 ...
- SAP Column tree
code as bellow *&---------------------------------------------------------------------* *& I ...
- 好用到爆!GitHub 星标 32.5k+的命令行软件管理神器,功能真心强大!
前言(废话) 本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合 MongoDB 的文章,结果在通过 brew 安装 MongoDB 的时候竟然报错了.原因很简单,公司这台 Mac 上的 homebr ...