标签：log DOM 元素 获取 BOM document 节点 属性
BOM DOM
BOM
概述：
BOM 浏览器对象模型，对于路由的底层就是bom
六大对象
window 全局对象
location 地址栏（url）*
history 历史页面 *
document 文档对象
navigator 导航（获取浏览器对应的信息）
screen 屏幕对象 （获取对应的宽高 适配兼容）
frames 框架的布局
DOM
概述：
DOM 文档对象模型 他是用于操作对应的html文档（增删改查）
dom树分为
元素节点 （所有的标签都是属于元素节点）
属性节点 （所有标签里面的属性都是属性节点）
文本节点 （所有显示的文本都是文本节点）
元素节点的操作
元素节点的获取
获取元素的方法
document对象加对应的方法来获取元素
getElementByID 根据id选择器获取（元素）
getElementsByClassName 根据class名字获取 （返回一个元素数组 他是一个伪数组 （除了具备对应的下标 和length属性其他方法都不具备））
getElementsByTagName 根据标签名获取 （返回伪数组 htmlcollection）
getElementsByName 根据name属性获取 （返回伪数组）
querySelector 根据选择器获取（他会获取找到第一个元素）
querySelectorall 根据选择器获取所有匹配的元素 （返回伪数组 nodeList）
获取body和head的属性
获取body document.body 属性
获取head document.head 属性
元素所具备的属性（赋值就是对应的设置 反之就是获取）
id 获取对应的id （设置）
className 获取对应的class名字
style 获取样式 （设置）
tagName 获取标签名
title 获取title属性
innerHtml 获取显示的内容 （设置显示的内容 包含html代码）
innerText 获取显示的文本 （设置显示的文本 不包含html代码）
所有的表单元素都具备的属性 value
节点的区分（属性）
nodeType 节点的类型
nodeName 节点名字
nodeValue 节点值
获取子节点
childNodes（获取所有的子元素节点及文本节点（包含空格和换行符））
children （获取所有的子元素节点） *
parentNode 获取对应的父节点
removeChild 移出子节点
Math的方法（静态方法）
abs 绝对值
random 随机数
pow 幂次方
sqrt 开平方
max 最大值
min 最小值
ceil 向上取整
floor 向下取整
round 四舍五入
属性
PI 圆周率
E 科学计数法
属性节点的相关的内容（针对元素节点）
获取所有的属性节点 attributes 返回一个伪数组（element）
var box = document.getElementById("box")
//所有元素都具备的属性 attributes 获取所有里面所有的属性节点 返回的是一个伪数组 namedNodeMap
//map key-value形式的伪数组 object
console.log(box.attributes);
console.log(box.attributes.length);
//通过下标来获取对应的属性节点
var id = box.attributes[0]
//通过key来获取对应的节点(属性名)
console.log(box.attributes['id']);//node对象
console.log(id);//node对象
// 节点的几个属性 nodeType nodeValue nodeName
console.log(id.nodeType); //2
console.log(id.nodeValue); //box
console.log(id.nodeName); //id
NamedNodeMap里面的方法
getNamedItem 获取对应属性节点
setNamedItem 设置对应的属性节点
removeNamedItem 移除对应的属性节点
关于属性操作的方法（操作任意属性）
getAttribute 获取属性值
setAttribute 设置属性
removeAttribute 移除属性
var div = document.querySelector("div")
//属性操作的三个方法
// 查询 获取 getAttribute(属性名)
var value = div.getAttribute("title") //返回属性值
console.log(value);
// 删除 delete 全删 remove 删内容不删日志 removeAttribute(属性名)
div.removeAttribute("title")
// 添加 添加重复就是修改 setAttribute(属性名,属性值)
div.setAttribute("class","box")
div.setAttribute("class","innerBox")
节点的操作
元素节点的创建 createElement
属性节点的创建 createAttribute
文本节点的创建 createTextNode
增删改的方法
appendChild 添加到后面
insertBefore 添加到前面
remove 移除自身的所有内容
removeChild 移除对应的子节点
replaceChild 替换对应的子节点
replaceChildren 替换里面的所有内容
//创建元素节点 返回的是一个元素节点 createElement(标签名)
var newEle = document.createElement("div")
var newEle1 = document.createElement("div")
//创建属性节点 createAttribute(属性名)
var attr = document.createAttribute("class")
//设置属性值
attr.value = "box"
//创建文本节点 传的是显示的内容 createTextNode(对应的文本)
var text = document.createTextNode("hello world")
//添加子节点 add append
newEle.setAttributeNode(attr) //设置属性节点 setAttribute
newEle.appendChild(text) //添加文本节点 innerText
var span = document.createElement("span")
var a = document.createElement("a")
var span1 = document.createElement("span")
newEle.appendChild(span)
// appendChild 追加到后面 insertBefore appendChild 元素已经添加是不会再次添加
newEle.insertBefore(span1,text)
document.body.appendChild(newEle) //添加元素节点
//删除节点 直接删除对应的节点
document.body.appendChild(newEle1)
newEle1.remove() //把自己所有的都删除 包含里面的内容和自己
//删除子节点 removeChild(传入的是被删除的节点)
newEle.removeChild(span1)
//修改的方法 replace replaceChildren替换所有的 replaceChild(新的节点,原本的子节点) 替换对应的节点
newEle.replaceChild(a,span)
newEle.replaceChildren(a) //不常用的
节点克隆的方法
cloneNode
var div = document.querySelector("div")
// deep 是否深入 里面的内容是否全部克隆包含事件
//如果deep是false 那么只能克隆当前的元素 默认为false
var clone = div.cloneNode() //节点克隆 返回的是克隆的元素
document.body.appendChild(clone)
节点之间的关系
父子关系（属性）
childNodes 获取所有的子节点（文本节点及元素节点）
children 获取所有的子元素节点
parentNode 父节点
parentElement 父元素
//获取子节点
var div = document.querySelector("div")
//得到所有的子节点
var childs = div.childNodes //返回nodeList
console.log(childs);
//返回所有的子元素节点
console.log(div.children);
//获取第一个子元素 空文本
console.log(childs[0].parentNode);//得到父节点 （节点）
//获取对应的父元素节点
console.log(childs[0].parentElement); //得到父元素（元素节点）
兄弟关系（属性）
previousSibling 前一个节点
previousElementSibling 前一个元素节点
nextSibling 后一个节点
nextElementSibling 后一个元素节点
firstChild 第一个节点
lastChild 最后一个
//获取前一个节点
var b = document.querySelector("b")
console.log(b.previousSibling); //前一个节点
console.log(b.nextSibling); //后一个节点
console.log(b.previousElementSibling); //前一个元素节点
console.log(b.nextElementSibling); //后一个元素节点
console.log(document.querySelector("div").firstChild); //获取第一个子节点
console.log(document.querySelector("div").lastChild);//获取最后一个子节点
this
this关键词表示自己 指向当前的调用者
//获取所有的按钮
var btns = document.querySelectorAll("button")
//for循环遍历
for (var i=0;i<btns.length;i++) {//var 声明的是伪全局作用域
//拿到对应的元素添加点击事件
btns[i].onclick = function(){ //事件是异步
// console.log(i);
// btns[i] 显示为undefined 原因是这个地方i为5
//this会指向你点的按钮
// console.log(this); this指向当前调用的元素
console.log(this.innerText);
}
}
setTimeout(function(){
console.log(this);
},100) //window 对象 setTimeout属于window对象的
console.log(i);
标签：log,DOM,元素,获取,BOM,document,节点,属性 来源： https://www.cnblogs.com/itxun/p/16371444.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。