7.操作BOM对象(重点)
7.1、浏览器介绍
JavaScript和浏览器的关系?
JavaScript的诞生就是为了能够让它在浏览器中运行!
BOM:浏览器对象模型
- IE
- Chorome
- Safari
- FireFox
7.2、window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
798
window.innerWidth
278
7.3、Navigator(不建议使用)
Navigator封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.platform
'Win32'
大多数时候,我们不会使用navigator对象,因为会被人为修改!
不建议使用这些属性来判断和编写代码
7.4、screen
代表屏幕尺寸
screen.width
1920
screen.height
1080
7.5、location(重要)
location代表当前页面的URL信息
host: "localhost:63342"
href: "http://localhost:63342/JavaScript/lesson02
protocol: "http:"
reload:f reload() //刷新网页 相当于F5
//设置新的地址
location.assign('https://home.cnblogs.com/u/Sunyn-blogs')
7.6、document
document代表当前的页面 HTML DOM文档树
获取具体的文档树节点
<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd></dl><script>var dl = document.getElementById('app')
</script>
获取cookie
劫持cookie原理:
恶意人员写一个非法网站 里面有非法js文件可能会获取你的cookie,再通过ajax上传到他的服务器
服务器端可以设置cookie:httpOnly
7.7、history(不建议使用)
history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
8.操作DOM对象(重点)
8.1、核心
浏览器网页就是一个DOM树形结构!
- 更新:更新DOM节点
- 遍历DOM节点:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');var childrens = father.children; //获取父节点下的所有子节点
这是原生代码,之后我们尽量都是用jQuery();
8.2、更新节点
<div id="id1"></div><script>var id1 = document.getElementById('id1');</script>
操作文本
-
id1.innerText='456' 可以修改文本的值
-
id1.innerHTML= '123'可以解析HMTL文本标签
操作JavaScript
id1.style.color = 'red'
'red'
id1.style.fontSize = '20px'
'20px
8.3、删除节点
步骤:先获取父节点,再通过父节点删除
<div id="father"><h1>标题一</h1><p id = "p1">p1</p><p class="p2">p2</p></div><script>var self = document.getElementById(p1)var father = p1.parentElement;
</script>
如果想删除p1:father.removeChild(self)
也可以这样删除
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
但是要注意删除是一个动态的过程,如果第一个元素被删除了,那么原来的第二个元素就会成为第一个元素
8.4、插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHTML就可以增加一个元素,但是这个DOM节点已经存在元素了,我们就不能这样做了!因为会覆盖之前的元素!
追加:
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js');var list = document.getElementById('list');</script>
原:
追加后:
8.5、创建新标签
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js');var list = document.getElementById('list');//通过JS,创建一个新的节点var newP = document.createElement('p');//创建一个p标签newP.id = 'newP';newP.innerText = 'Hello,sunyaning';
</script>
//创建一个标签节点var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');
myScript.setAttribute('type','text/javascript');等价于
8.6、insert
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
9.操作表单
9.1、表单是什么 form
- 文本框 text
- 下拉框