您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

操作BOM对象和DOM对象

1、操作BOM对象(浏览器对象模型)

window:代表浏览器窗口,获取浏览器内外窗口高宽

window.innerHeight;
window.innerWidth;
window.outerHeight;
window.outerWidth;

navigator:封装了浏览器的信息

screen:屏幕尺寸

location:代表当前页面的URL信息    控制台输入location可获取信息

host: "web.sogou.com"            //主机信息
href: "https://web.sogou.com/?21997"        //当前指向的位置
protocol: "https:"                //协议
reload: ƒ reload()                //重新加载(刷新网页)
location.assign('https://www.bilibili.com/video/BV1JJ41177di?p=19')    //设置新的地址

document:代表当前页面信息

document.title             //获取页面信息

document.cookie        //获取cookie

2、操作DOM对象(文档对象类型)

获取DOM节点

<div id="app">
    <dt>java</dt>
    <dd class="d1">javascriptt</dd>
    <dd id="d2">c++</dd>
</div>

var app = document.getElementById('app');        //根据id获取DOM节点
var dt=document.getElementsByTagName('dt');        //根据标签名获取DOM节点
var d1=document.getElementsByClassName('d1');        //根据class获取DOM节点
var d2=document.getElementById('d2');
var ch=father.lastChild            //father.children获取父节点下的所有子节点、father.firstChild获取父节点下的第一个子节点、father.lastChild获取父节点下的最后一个子节点
注:链接式js注意写回调函数window.οnlοad=function (),不然就把script标签链接放HTML最后

更新DOM节点:

操作HTML文本:
d2.innerText='5555';            //修改文本值
d2.innerHTML='<strong>555</strong>'    //可以解析HTML文本标签
注:innerText修改文本值和innerHTML解析HTML只有id获取的能直接点调用,如果是标签和class获取的需加下标为数组如:dt[0].innerText
操作CSS        注:属性使用字符串包着
dt[0].style.color='red';
dt[0].style.fontSize='100px';
dt[0].style.padding='200px';

删除DOM节点:

步骤:先获取父节点,再通过父节点删除自己
app.removeChild(dt[0]);    //注:只有id获取的能直接删除,标签和class获取的需要加下标
app.removeChild(d2);
子节点获取父节点的方法:
d2.parentElement
d1[0].parentElement        //注:只有id获取的能直接获取到父类,标签和class获取的需要加下标
定义一个父类:        var father=d1[0].parentElement;
子通过父类删除子节点:    father.removeChild(dt[0]);
动态删除,父节点获取自己的所有子节点,通过子节点下标删除
app.removeChild(app.children[0]);
注:删除多个节点时需要注意children下标是在变化的

插入DOM节点

追加:把在外面的标签元素放进里面变成自己的子元素
<p id="p1">p1</p>
<p>p2</p>
<p class="p3">p3</p>
<div id="app">
    <dt>java</dt>
    <dd class="d1">javascriptt</dd>
    <dd id="d2">c++</dd>
</div>
已存在的标签节点插入到任何标签后面:
var app = document.getElementById('app');
var p1 = document.getElementById('p1');
var p2=document.getElementsByTagName('p');
var p3=document.getElementsByClassName('p3');
app.appendChild(p1);    //注:通过id追加可以不用获取节点
app.appendChild(p2[1]);
app.appendChild(p3[0]);
注:先获取节点,然后调用appendChild()追加到父元素里面,标签和class需要下标

createElement():创建一个新的标签,实现插入:
var newp = document.createElement('p');    //document.createElement()创建一个新的标签节点
newp.id='newp';                //给newp这个新标签节点的id赋值
newp.innerText='newp';            //给newp这个新标签赋文本值
app.appendChild(newp);            //把新标签插入父元素app中

创建一个script标签
var my=document.createElement('script');            //创建style标签
my.setAttribute('type','text/javascript');

创建一个style标签
var mystyle = document.createElement('style');            //创建style标签
mystyle.setAttribute('type','text/css');                //
mystyle.innerHTML='body{background-color: red;}';        //在style标签里设置body的背景颜色
document.getElementsByTagName('head')[0].appendChild(mystyle);    //先获取父节点head,把新建的style标签放父元素里
注:script和style标签比较特殊,需要设置type的值(type=text/css),使用setAttribute('type','text/css')函数实现

insertBefors(newNode,targetNode):插入到某个节点前面        注:newNode新节点,targetNode目标节点
父节点.insertBefore(新节点,目标节点)    //注:如果不是用id获取的节点需要加下标
app.insertBefore(p1,d1[0]);

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进