目录
DOM操作
一、题目
1、DOM是那种基本的数据结构?
树结构。
2、DOM操作的常用API有哪些
- 获取DOM节点,以及节点的property和Attribute
- 获取父节点,获取子节点
- 新增节点,删除节点
3、DOM节点的attr和property有何区别
property只是一个JS对象的属性的获取和修改
Attribute是对HTML标签属性的获取和修改
4、如何检测浏览器的类型
var ua=navigator.userAgent;
var isChrome=ua.indexof('Chrome')
console.log(isChrome)
5、拆解url的各部分
console.log(location.href); //整个url
console.log(location.protocol); //协议 'http' 'https'
console.log(location.pathname); //'路径'
console.log(location.search);
console.log(location.hash);
二、知识点
2.1 DOM本质
DOM(document object module)文档对象模型。
浏览器把拿到的HTML代码,结构化一个浏览器能识别并且js可操作性的一个模型而已
2.2 DOM节点操作
详细讲解 参考本文章http://blog.sina.com.cn/s/blog_c112a2980102xkry.html
- 获取DOM节点
1)document.getElementById("idname");//输出一个对象[object HTMLInputElement]
2)document.getElementsByName("name");//输出一个数组对象[object NodeList]
3)document.getElementsByTagName("div");//输出一个数组对象[object HTMLCollection]
4)document.getElementsByClassName("classname");//输出一个数组对象[object HTMLCollection]HTML5 DOM中新增了一个令人期待已久的方法getElementsByClassName,不过由于这个方法还比较新,某些DOM实现里可能还没有,所以使用的时候要当心
5)document.forms;//forms返回一个数组对象[object HTMLCollection](一个HTMLCollection对象),包含了当前文档中的所有form元素。如果要获取当前页面的第一个表单,document.forms[0]。如果要获取当前页面的name="exportServlet"的表单document.forms['exportServlet'],后面输出的结果应该是[object HTMLFormElement]。
6)document.querySelector("selectors");//输出的是一个元素对象[object HTMLInputElement],HTML5新引入了document.querySelector方法用来更方便的从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生脚本代码时方便了许多。接收的参数是一个字符串,这个字符串需要按照合法的css选择语法。可以包含多个css选择器,用逗号隔开querySelector(".inputclass,#username")。但是这两个方法无法查找带伪类状态的元素。比如querySelector(":hover")不会得到预期结果。按照深度优先和先序遍历的原则使用参数提供的css选择器在dom进行查询,返回第一个满足条件的元素。
7)document.querySelectorAll("selectors")//[object NodeList]返回满足条件的元素集合。参数里如果有特殊符号,可以进行转义
- property JS对象的属性
- Attribute 自定义属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js.js"></script>
</head>
<body>
<div id="div1" class="class-div1">
<p id="p1" data-name="p1-data-name">this is p1</p>
<p id=""p2>this is p2</p>
</div>
<div id="div2">
<p>this is p3</p>
<p>this is p4</p>
</div>
<script>
//property
var div1=document.getElementById("div1");
console.log(div1.className);
div1.className="abc";
console.log(div1.className);
//attribute
var p1=document.getElementById("p1");
console.log(p1.getAttribute("data-name"))
p1.setAttribute("data-name","xyz")
</script>
</body>
</html>
2.3DOM结构操作
- 新增节点
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)
- 获取父节点
- 获取子节点 (<div><p></p></div>换行与不换行的div的子节点的数量是不一样的)
- 删除节点
var div1=document.getElementById('div1')
//获取父节点
var parent=div1.parentNode
//获取子节点
var child=div1.childNodes //所有的子节点
console.log(child[0].nodeType) //3 节点类型
console.log(child[1].nodeType) //p 节点名称
//删除节点
div1.removeChild(child[0])
2.4 BOM操作
Browser Object Model 浏览器对象模型
2.5 navigator screen location history
//navigator
var ua=navigator.userAgent;
var isChrome=ua.indexof('Chrome')
console.log(isChrome)
//screen
console.log(screen.width)
console.log(screen.height)
//location
console.log(location.href); //整个url
console.log(location.protocol); //协议 'http' 'https'
console.log(location.host); //域名
console.log(location.pathname); //'路径'
console.log(location.search);
console.log(location.hash); // #之后
//history
history.back() //返回
history.forward() //前进