`
SIHAIloveYAN
  • 浏览: 119388 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

JavaScript教程之DOM和BOM

 
阅读更多

一：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);//<TextNode textContent="例子程序"/>
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);//5
console.log(u.firstChild);
console.log(u.firstChild.nextSibling);

5、父节点

节点.parentNode;

6、属性操作

6.1、属性值操作：

①   获取属性值
元素节点node.属性名称;   //只能操作w3c规定的属性
元素节点node.getAttribute(属性名称);  //规定的 和 自定义的属性都可以获取
②   设置(修改)属性值
元素节点node.属性名称 = 值;  //只能操作w3c规定的属性
元素节点node.setAttribute(名称，值); //规定的 和 自定义的属性都可以设置

6.2、属性节点获取：

var attrlist = 元素节点对象.attributes;  //以“数组列表”形式返回对应节点内部的全部属性节点信息
attrlist.属性名称;   //获得具体属性节点

获得节点类型nodeType：
节点.nodeType:
1------> 元素节点
2------> 属性节点
3------> 文本节点
9------> 文档节点

var in = document.getElementByTagName("input")[0];
console.log(in.attributes);//[type="text" , name="username",value="sihai"]
console.log(in.attributes.type);//type="text"
console.log(in.attrubutes.name.nodeType);//2 属性节点

7、节点创建和追加

节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加：
父节点.appendChild(子节点);
    父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
    父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

8、节点复制

被复制节点.cloneNode(true/false);
true:深层复制(本身节点 和 其内部节点)
false:浅层复制 (本身节点)

9、节点删除

父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);

10、dom对css样式的操作

<div style=”width:300px;height:200px; background-color:pink;”></div>
①   获取css样式
    元素节点.style.css样式名称;
    divnode.style.width;  //获取宽度样式
②   设置css样式(有则修改、没有则添加)
    元素节点.style.css样式名称 = 值;
    divnode.style.width =‘500px’;设置div宽度样式

注意：
①   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>
分享到：
| JavaScript教程之快速入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM和BOM的使用

    BOM 提供了一些浏览器相关的功能，例如窗口、导航、历史记录等，而 DOM 则是文档对象模型，它允许开发者通过 JavaScript 操作文档的内容和结构。 DOM 概述 DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形...

    JavaScript_2_DOM和BOM1

    JavaScript DOM 和 BOM JavaScript 的 DOM（Document Object Model）和 BOM（Browser Object Model）是两种不同的对象模型，它们都是 JavaScript 语言的核心组件。DOM 是一种编程接口，用于访问和操作 HTML 文档中...

    2 妙味课堂原创JavaScript视频教程 DOM 2课 BOM课程资料

    在本套“妙味课堂原创JavaScript视频教程”中，将深入讲解DOM（Document Object Model）和BOM（Browser Object Model）两个关键概念。 DOM是HTML和XML文档的编程接口，它将网页内容结构化为一个树形结构，使得...

    W3SChool离线手册+jsdom+bom

    【标题】"W3School离线手册+jsdom+bom" 涵盖了Web开发中的基础和进阶知识，主要包括HTML、CSS和JavaScript的相关内容，同时提到了jsdom库以及浏览器对象模型（BOM）的概念。这个压缩包很可能是为开发者提供一个离线...

    JAVAscript的BOM/DOM.xmind

    JAVAscript的BOM/DOM.xmind

    Javascript之BOM与DOM讲解

    JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...

    BOM和DOM模型图

    在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型 BOM并不是一个标准，而是浏览器厂商为了...

    Html dom _BOM 模型 _事件处理机制 _面向对象基础

    以上内容中包含了对DOM中各种对象的属性和方法的使用，BOM模型的核心对象window及其常用方法，JavaScript中的事件处理机制，包括事件是如何产生的、事件对象的特性以及事件冒泡现象，以及面向对象编程的基础知识，...

    Javascript操作BOM和DOM

    在JavaScript的世界里，BOM（浏览器对象模型）和DOM（文档对象模型）是两个至关重要的概念，它们允许开发者与用户的浏览器进行深入交互。 **BOM（浏览器对象模型）**: BOM是浏览器提供的一系列接口，它允许...

    javascript中的BOM与DOM、JS核心.pdf

    JavaScript使用心得之BOM与DOM，主要是使用JavaScript的基本语句，以及BOM和DOM提供的对象的属性和方法，来操作各个BOM对象的属性以及各个DOM节点的属性甚至是结构，从而控制浏览器窗口行为和文档内容及其展示。

    JS(Dom+Bom).docx

    JavaScript，简称JS，是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，尤其在客户端渲染方面占据重要地位。它基于对象和事件驱动，这意味着你可以直接利用内置的对象进行操作，并通过事件来触发程序的执行。...

    Javascript之BOM与DOM讲解.pdf

    Javascript之BOM与DOM讲解

    _javascript_BOM&DOM&JSON

    javascript BOM 和 DOM 和 JSON

    HTML-01-第10章 DOM和BOM.pptx

    掌握DOM和BOM对于前端开发至关重要，它们是JavaScript与HTML交互的基础，使得动态更新网页内容、响应用户交互成为可能。通过理解并熟练运用DOM和BOM，开发者可以构建更加丰富和交互性强的Web应用。

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中的BOM（Browser Object Model，浏览器对象模型）和DOM（Document Object Model，文档对象模型）是两个核心概念，它们都是JavaScript与网页交互的关键部分。 **BOM（浏览器对象模型）** 1. **Window...

    BOM和DOM对象的简单介绍

    在 JavaScript 中，BOM 和 DOM 对象是紧密相连的，BOM 对象提供了浏览器和屏幕的信息，而 DOM 对象提供了文档的结构和内容。只有通过 kombinieren BOM 和 DOM 对象，JavaScript 才能提供强大的功能和灵活性。

    实现JavaScript的组成—-BOM和DOM详解

    我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页...

    javascript bom是什么及bom和dom的区别

    BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧

    javascript学习笔记（三）BOM和DOM详解

    我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 ...

    javascript中的BOM与DOM、JS核心[收集].pdf

    总的来说，JavaScript的BOM和DOM提供了强大的能力，让开发者可以灵活地操控浏览器环境和网页内容。掌握它们，不仅可以制作出吸引人的网页，还能开发出功能丰富的Web应用程序。随着HTML5的普及，JavaScript的角色将...

Magicbox
Global site tag (gtag.js) - Google Analytics