• • 常见的DOM对象
  • 操作DOM对象
  • • 标签选择器
    • id选择器
    • class选择器
  • 获得DOM节点
  • 更新DOM节点
  • 删除DOM节点
  • 创建和插入DOM节点

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
444

navigator

封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.platform
'MacIntel'

screen

screen.height
900
screen.width
1440

location

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=62095104_19_oem_dg"
reload: ƒ reload()  //刷新页面

location.assign('http://blog.shyshy.site') //跳转网页

document

document代表当前页面，HTML DOM文档树

document.title
'百度一下，你就知道'
document.title='Lum1n0us'
'Lum1n0us'

获取具体的文档树节点

    
    


    

      
java
        
python
        
js
    

获取cookie

document.cookie

history

history.back()  //后退
history.forward()  //前进

浏览器的网页是一个树形结构

• 更新：更新dom节点
• 遍历dom节点：得到dom节点
• 删除：删除一个dom节点
• 添加：添加一个新的dom节点

要操作一个dom节点，就必须获得这个dom节点

document.getElementsByTagName()

document.getElementById(‘p1’)

document.getElementsByClassName(‘p2’)

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementsByClassName('father');

var children = father.children;

var id1=document.getElementById('id1');

操作文本

id1.innerText = '123';

操作css

id1.style.color = 'red';

删除节点步骤：先获取父节点，通过父节点删除自己

    
标题1
    
p1
    
p2

删除多个节点时，children是在时刻变化的。

我们获得了某个dom节点，假设这个节点是空的，可以使用innerHTML就可以增加一个元素，但是这个dom节点已经存在元素时，就不能这样操作，否则会产生覆盖。

追加：

javascript

    
javase
    
javaee
    
javame

创建一个新标签，实现插入

var js = document.getElementById('js');
var list = document.getElementById('list');
var newP = document.createElement('p');
newP.id='newP';
newP.innerText='hello';
list.appendChild(newP);

创建一个新的标签节点

var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');

insertbefore()

var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
list.insertBefore(js,ee);

要包含的节点.insertBefore(newNode,targetNode)