博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BOM/DOM
阅读量:6332 次
发布时间:2019-06-22

本文共 2284 字,大约阅读时间需要 7 分钟。

BOM

BOM:浏览器对象模型

1、全局默认对象是挂在windows上的;

2、Windows下的子对象:

1location 刷新

刷新的方法:window.location.reload( );

window.location.href               当前页面的 URL,可以获取,可以修改(页面跳转)。

window.location.hostname       web主机的域名

window.location.pathname       当前页面的路径和文件名

window.location.port               web主机的端口 (80 443

window.location.protocol          所使用的 web 协议(http:// https://

window.location.search            请求参数(?后面的内容)

 

2window.navigator

navigator.appName        返回获取当前浏览器的名称。

navigator.appVersion      返回获取当前浏览器的版本号。

navigator.platform         返回当前计算机的操作系统。

navigator.userAgent      返回浏览器信息

 

3history

    history.go(1)       参数可写任意整数,正数前进,负数后退

    history.back( )    后退

history.forward( )   前进

 

4screen: 屏幕

window.screen.width   返回当前屏幕宽度(分辨率值)

window.screen.height   返回当前屏幕高度(分辨率值)

 

5window下的弹框方法

alert( )    prompt( )   confirm( )

 

6)定时器

    超时定时器        间隔定时器

    setTimeout         setInterval

clearTimeout       clearInterval

 

7window.onload   页面加载

 

8window.onscroll  滚动条兼容

 

9window.onresize  浏览器窗口大小触发事件

DOM

DOM:文档对象模型

获取DOM节点:

1document.getElementById(id)

2getElementsByTagName(标签名)

得到的是一个集合(不止一个,是一堆)

 

 

3getElementsByName( ) 通过Name值获取元素,返回值是集合,通常用来获取有nameinput的值;

 :1、不是所有的标签都有name值;

2、低版本的浏览器会有兼容问题;

4children属性,获得DOM元素的所有子元素;返回值是集合

5parentNode属性,获得DOM元素的父级元素

6getElementsByClassName(class名称)但是:IE8以下不能用

7ES5选择器:

document.querySelector (  )    一旦匹配成功一个元素,就不往后匹配了

document.querySelectorAll (  )    匹配到所有满足的元素, 支持IE8+

 

 

属性获取和操作

1getAttribute( )获取元素的属性值,他是节点的方法!所以前缀必须是节点!

   document.getElementById( ID).getAttribute( )

   什么是元素属性呢? class就是元素属性,写在标签内的所有东西都是标签属性, 比如linkhref比如imgsrc....都是元素属性。

   元素自带的属性可以直接用语法获取但是自定义属性需要 getAttribute() setAttribute( ) 方法

2setAttribute( )设置元素的属性。同上;

有些小小的兼容性问题,低版本IE不兼容;

设置的属性永远都是字符串类型

3removeAttribute( )删除属性;同上;

兼容性问题同上;

 

 

DOM元素类型

(元素、文本和属性)

1、node.Name    节点名称

2、node.Type    1=元素节点、2=属性节点、3=文本节点

元素节点:标签名(大写)

属性节点:属性名称

文本节点:#text

 

适用场所:网页换肤、隔行变色。

 

操作DOM

作用:增、删、克隆节点

 

创建节点

var oDiv = document.createElement("div");

 

克隆节点

clonedNode = Node.cloneNode(boolean)    只有一个参数,传入一个布尔值,true表示深客隆,复制该节点下的所有子节点;false表示浅克隆,只复制该节点

 

插入节点

parentNode.appendChild(childNode);            将新节点追加到子节点列表的末尾

parentNode.insertBefore(newNode, targetNode);   newNode插入targetNode之前

 

替换节点

parentNode.replaceChild(newNode, targetNode);   使用newNode替换targetNode

 

移除节点

parentNode.removeChild(childNode);           移除目标节点

node.parentNode.removeChild(node);       在不清楚父节点的情况下使用

 

childNode.remove( )                         IE不支持

转载于:https://www.cnblogs.com/zhengqiang666/p/10656325.html

你可能感兴趣的文章
人形机器人管家
查看>>
字符串转数字
查看>>
公共消息提示框的使用
查看>>
设置开机自启的脚本,用户管理
查看>>
决心书
查看>>
你真的懂JAVA吗
查看>>
课程第九天内容《基础交换九》 补充内容 操作
查看>>
怎样使用U盘安装Windows系统
查看>>
面向对象与原型(js)
查看>>
华为eNSP浮动路由实现不同vlan之间的通信
查看>>
HanLP Analysis for Elasticsearch
查看>>
Ubuntu系统终端环境支持中文的方法
查看>>
docker构建私有仓库
查看>>
2018/12/31抓取装置投运前两天的电流数据来判断通讯情况
查看>>
Android获得手机UserAgent的源码
查看>>
职场人必备:工作述职报告PPT模板
查看>>
华为认证让你的实习工资比别人高出一截
查看>>
hcl安装出现的问题
查看>>
Netty源码之ChannelPipeline和ChannelHandlerContext
查看>>
【读书分享】流血的仕途
查看>>