一:DOM操作
1、 介绍
dom: document object model 文档对象模型
DOM可以让我们通过javascript语言对html文档进行增、删、改、查操作。
为了方便javascript语言通过dom操作html文档比较方便,把html文档的各个组成内容划分为各种节点(对象):
文档节点(document),其是html根节点的父节点
元素节点
文本节点
属性节点
注释节点
以下的代码都以这个为例子程序:
<html>
<head>
<title>这是一个title</title>
</head>
<body>
<h1>例子程序</h1>
<input id="username" name="username" type="text" value="sihai"/>
<input id="password" name="password" type="text" value="123"/>
</body>
</html>
2、元素节点的获取
具体操作方法:
① document.getElementById(id属性值)
每次只返回一个具体元素节点对象
② document.getElementsByTagName(tag标签名称)
每次返回一个“集合列表”对象,可以通过下标方式变为具体元素对象:
列表[下标] 或 列表.item(下标)
③ document.getElementsByName(name属性值)
有的浏览器针对form表单域才可以使用该方法。
通常应用在form表单里边,返回的信息同
var username = document.getElementById("username");
console.log(username);
var in = document.getElementsByTagName("input");
console.log(in[0]);
console.log(in.item[0]);
3、文本节点获取
<div>hello JavaScript</div>
需要借助div元素节点再获得其内部的文本节点:
div元素节点对象.firstChild; //或调用lastChild,获得节点内部的第一个子节点
文本节点.nodeValue; //获得文本节点对应的文本信息
var h = document.getElementByTagName("h1")
console.log(h[0].firstChild)
console.log(h[0].lastChild.nodeValue)
4、子节点/兄弟节点
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上一个兄弟节点
childNodes:父节点获得内部全部的子节点信息
length: 获得“集合列表”的长度
**注意:**以上属性在主流浏览器(火狐firefox、chrome、safari、opera、IE9以上)中会给考虑空白节点(回车、空格)。在IE(6/7/8)浏览器中不考虑空白节点。
空白节点本质:其是文本节点
<ul>
<li>上海</li>
<li>广州</li>
</ul>
var u = document.getElementByTagName("ul")
console.log(u[0].childNodes.length)
console.log(u.firstChild)
console.log(u.firstChild.nextSibling)
5、父节点
节点.parentNode
6、属性操作
6.1、属性值操作:
① 获取属性值
元素节点node.属性名称;
元素节点node.getAttribute(属性名称);
② 设置(修改)属性值
元素节点node.属性名称 = 值;
元素节点node.setAttribute(名称,值);
6.2、属性节点获取:
var attrlist = 元素节点对象.attributes;
attrlist.属性名称;
获得节点类型nodeType:
节点.nodeType:
1
2
3
9
var in = document.getElementByTagName("input")[0]
console.log(in.attributes)
console.log(in.attributes.type)
console.log(in.attrubutes.name.nodeType)
7、节点创建和追加
节点创建
元素节点:document.createElement(tag标签名称)
文本节点:document.createTextNode(文本内容)
属性设置:node.setAttribute(名称,值)
节点追加:
父节点.appendChild(子节点)
父节点.insertBefore(newnode,oldnode)
父节点.replaceChild(newnode,oldnode)
8、节点复制
被复制节点.cloneNode(true/false);
true:深层复制(本身节点 和 其内部节点)
false:浅层复制 (本身节点)
9、节点删除
父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点)
10、dom对css样式的操作
<div style=”width:300px
① 获取css样式
元素节点.style.css样式名称
divnode.style.width
② 设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值
divnode.style.width =‘500px’
注意:
① dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部)
② 操作复合样式例如background-color/border-left-color,font-size
需要变为backgroundColor、borderLeftColor,fontSize中恒线去掉,后边首字母大写。(原因:javascript的变量命名规则不允许有“-”中横线)
③ 修改样式,有则修改、无则新增,修改后的样式变为行内样式
二、BOM
DOM:document object model(文档对象模型)
BOM:browser object model(浏览器对象模型)
通过BOM技术可以模拟浏览器对页面进行各种操作:创建子级标签页面、操作历史记录页面、操作地址栏等等
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到:
相关推荐
2 妙味课堂原创JavaScript视频教程 DOM 2课 BOM课程资料
JAVAscript的BOM/DOM.xmind
第三章 JavaScript的DOM3.1 概述通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。当网页被加载时,浏览器会创建页面
w3school+jsdom+bom;w3school+jsdom+bom;w3school+jsdom+bom
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...
Javascript操作BOM和DOM
Javascript之BOM与DOM讲解
javascript BOM 和 DOM 和 JSON
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页...
BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别,感兴趣的朋友一起学习吧
我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准; [所有浏览器公共遵守的标准] 2. BOM 是 ...
ID和CLASS的区别 DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、...
javascript操作BOM对象.docx
WEB_深入解读JavaScript中BOM和DOM.pdf
配套博客:https://liuyandeng.blog.csdn.net/article/details/51395830
javascript中的BOM与DOM、JS核心.pdf
从颇具深度的JavaScript语言基础到作用域(链),从引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(BOM)、文档对象模型(DOM)到基于事件的Web脚本设计,从XML(E4X)到Ajax及JSON,从...
javascript中的BOM与DOM、JS核心[收集].pdf