DOM操作(文档对象模型)
知识点:
1、DOM本质什么?
浏览器把拿到的HTML代码,结构化一个浏览器能识别并且js可操作的一个模型而已
2、DOM节点操作
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() //通过元素Id,唯一性
//获取DOM节点:
var div=document.getElementById('div1')//元素
var divList=document.getElementsByTagName('div')//元素集合
var containerList=document.getElementsByClassName('.container')//集合
3、DOM结构操作
//新增节点:
var div1=document.getElementById('div1');
var p5=document.createElement('p')
p5.innerHTML='我是新增元素p5';
div1.appendChild(p5)
//移动元素:
var p2=document.getElementById('p2')
div1.appendChild(p2)
//获取父、子节点:
var parent=div1.parentElement
var child=div1.childNodes
//删除节点:
div1.removeChild(child[0])
题目:
1、DOM是哪种基本的数据结构?
答案:树
2、DOM操作的常用API有哪些?
- 获取DOM节点,以及节点的property和Attribute
- 新增、移动、删除节点
3、DOM节点attribute和Property 有何区别?
- property只是一个js对象的属性的修改
- attribute是对HTML标签属性的修改
代码演练:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
padding: 2%;
background-color: gainsboro;
margin: 1% 0;
}
</style>
</head>
<body>
<div id="div1" class="class-div1">
<p id="p1" data-name="pa-data-name">this is a p1</p>
<p id="p2">this is a p2</p>
</div>
<div id="div2">
<p id="p3">this is a p3</p>
<p id="p4">this is a p4</p>
</div>
<script type="text/javascript">
//property
var div1=document.getElementById('div1');
console.log(div1.className);
div1.className='aaa'
console.log(div1.className)
//attribute
var p1=document.getElementById('p1')
console.log(p1.getAttribute('data-name'))
p1.setAttribute('data-name','fan')
var div1=document.getElementById('div1');
//新增节点
var p5=document.createElement('p')
p5.innerHTML='我是新增元素p5';
div1.appendChild(p5)
//移动已有的元素p2到最后
var p2=document.getElementById('p2')
div1.appendChild(p2)
//获取父节点、子节点
var parent=div1.parentElement
console.log(parent)
var child=div1.childNodes
console.log(child)
//删除节点:
div1.removeChild(child[0])
</script>
</body>
</html>
效果:
BOM操作(浏览器对象模型)
知识点:
- navigator
navigator.userAgent - screen
screen.width
screen.height - location
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash) - history
history.back 后退
history.forward 前进
题目:
1、如何检测浏览器的类型
var ua=navigator.userAgent //获取浏览器信息,区分出来浏览器类型
var isChrome=ua.indexOf('Chrome')
console.log(isChrome)
2、拆解URL的各部分
例子:
https://cn.vuejs.org/v2/guide/?21#Vue-js-是什么
console.log(location.href) //输出URL地址"https://cn.vuejs.org/v2/guide/#Vue-js-是什么"
console.log(location.protocol) //输出协议https:
console.log(location.host) //输出域"cn.vuejs.org"
console.log(location.pathname) //输出路径"/v2/guide/"
console.log(location.search) //"?21"
console.log(location.hash) //#后面的东西"#Vue-js-是什么"