操作 BOM

screen

screen.width
1920
screen.height
1080

location 代表当前页面的URL信息

//设置新的地址
location.assign(https://www.bilibili.com/video/BV1JJ41177di?p=19)

document 代表当前页面

document.title
"Title"
document.title="来试试"
"来试试"

获取具体的文档树节点

  <dl id="game">
    <dt>游戏库</dt>
    <dd>英雄联盟</dd>
    <dd>守望先锋</dd>
  </dl>

  <script>
    var games = document.getElementById('game')
  </script>

获取cookie

document.cookie

history 代表浏览器的历史记录

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

DOM 更新节点

操作文本

id1.innerText="123" //修改文本的值
id1.innerHTML='<strong>游戏列表</strong>' //可以解析html文本标签

操作css

id1.style.color='pink'//属性使用字符串包裹  驼峰命名

删除节点

<div id="father">

    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>
<script>
    var father = document.getElementById('father');
    father.removeChild(p1);

</script>

插入节点

<p id="g1">游戏库</p>
<div id="list">
    <p id="g2">英雄联盟</p>
    <p id="g3">守望先锋</p>
    <p id="g4">彩虹六号</p>
</div>

<script>
    var g1 = document.getElementById('g1');
    var list = document.getElementById('list');
    
    list.append(g1)
    
</script>

创建一个新的标签

<p id="g1">游戏库</p>
<div id="list">
    <p id="g2">英雄联盟</p>
    <p id="g3">守望先锋</p>
    <p id="g4">彩虹六号</p>
</div>

<script>
    var g1 = document.getElementById('g1');//已经存在的节点
    var list = document.getElementById('list');
    //通过js创建一个新的节点
    var newP = document.createElement('p')//创建一个P标签
    newP.id = 'newP';
    newP.innerText = '我创建成功咯'
    
    list.appendChild(newP); //插入到list里面

    //创建一个标签节点，通过这个属性可以设置任意的值
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
</script>