DOM可以理解为:浏览器把拿到的html代码,结构化为一个浏览器能够识别并且js可以操作的一个模型而已。
一.DOM节点操作
- 获取DOM节点
<script type="text/javascript">
var one = document.getElementById("app"); //元素
var two = document.getElementsByTagName("div") //集合
var three = document.getElementsByClassName("total") //集合
var four = document.querySelectorAll('p') //集合
</script>
2.属性property, js对象的标准属性
<script type="text/javascript">
var pList = document.querySelectorAll("p");
var p = pList[0]; //p实际上是一个js对象
console.log(p.style.width); //获取样式,p是js对象,那么他就有属性,style就是p的一个属性
p.style.width = "300px"; //修改样式
console.log(p.className); //获取class
p.className = "p1"; //修改样式
//获取nodeName 和 nodeType
console.log(p.nodeName);
console.log(p.nodeType);
/*nodeName 属性指定节点的节点名称。
如果节点是元素节点,则 nodeName 属性返回标签名。
入股节点是属性节点,则 nodeName 属性返回属性的名称。
对于其他节点类型,nodeName 属性返回不同节点类型的不同名称。*/
/*nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2*/
</script>
3.属性Attribute,指的是标签里面的属性
<script type="text/javascript">
var pList = document.querySelectorAll("p");
var p = pList[0];
p.getAttribute("data-name"); //获取p这个对象对应的标签的data-name属性
p.setAttribute("data-name", "imooc"); //设置p这个对象对应的标签的data-name属性为imooc
p.getAttribute("style");
p.setAttribute("style", "color:red;");
</script>
二.DOM结构操作
- 新增节点
<body>
<div id="div1"></div>
<p id="p2"></p>
<script type="text/javascript">
var div1 = document.getElementById("div1");
//添加新节点
var p1 = document.createElement('p');
p1.innerHTML = "this is p1";
div1.appendChild(p1); //添加新创建的元素
//移动已经有的节点,排在最后
var p2 = document.getElementById("p2");
div1.appendChild(p2);
</script>
</body>
2.获取父元素和子元素以及移除节点
<body>
<div class="box">
<div id="div1">
<p>p1</p>
<p>p2</p>
<span>span1</span>
<span>span2</span>
</div>
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
//获取父元素
var parent = div1.parentElement; //元素,即class="box"的div
//获取子元素
var child = div1.childNodes; //集合,text指的是标签之间含有的空白文本,如果将空隙删除,则没有text,可以用nodeType或者nodeName来进行判断
//移除节点
div1.removeChild(child[1]);
</script>
</body>
问题一:DOM是那种基本的数据结构?
-
树
问题二:DOM操作常用API有哪些?
- 获取DOM节点,以及节点的property和Attribute
- 获取父节点,获取子节点
- 新增节点,删除节点
问题三:DOM节点的Attribute和property有何区别?
- property只是一个js对象属性的获取和修改
- Attribute是对html标签属性的获取和修改
三.BOM操作
1.navigator & screen
<script type="text/javascript">
//navigator 获取浏览器信息
var ua = navigator.userAgent;
var isChrome = ua.indexOf("Chrome");
console.log(isChrome);
//screen 浏览器屏幕相关信息
console.log(screen.width); //1366
console.log(screen.height); //768
</script>
2.location & history
<script type="text/javascript">
//location 获取url相关信息
console.log(location.href);
console.log(location.protocol); //协议,'http:'或'https:'
console.log(location.host); //获取域名
console.log(location.pathname) //获取域名后面的目录,如'/learn/199'
console.log(location.search); //url中?的后面的一些字符串参数
console.log(location.hash); //url中#后面的一些信息
//history
history.forward(); //下一步
history.back(); //返回
</script>
问题一:如何检测浏览器的类型?
<script>
var ua = navigator.userAgent;
var isChrome = ua.indexOf("Chrome");
console.log(isChrome);
</script>
问题二:拆解url的各部分。
<script>
console.log(location.href);
console.log(location.protocol); //协议,'http:'或'https:'
console.log(location.host); //获取域名
console.log(location.pathname) //获取域名后面的目录,如'/learn/199'
console.log(location.search); //url中?的后面的一些字符串参数,包括问号
console.log(location.hash); //url中#后面的一些信息,包括井号
</script>
想要改变页面地址,可以:
location.href = 'https://www.imooc.com';