首页 / JAVASCRIPT / JavaScriptDOM基础_基础知识

JavaScriptDOM基础_基础知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScriptDOM基础_基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9316字，纯文字阅读大概需要14分钟。

内容图文

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

一 DOM介绍

D(文档):可以理解为整个Web加载的网页文档;
O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
M(模型):可以理解为网页文档的树形结构;

1.节点

加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
DOM将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;

2.节点种类:元素节点/文本节点/属性节点

测试Div

元素节点 => div;
属性节点 => title="元素属性"
文本节点 => 测试Div二查找元素
W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作;
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

元素节点查找方法
方法说明
getElementById() 获取特定ID元素的节点;
getElementsByTagName() 获取相同元素的节点列表;
getElementsByName() 获取相同名称的节点列表;
getAttribute() 获取特定元素节点属性的值;
setAttribute() 设置特定元素节点属性的值;
removeAttribute() 移除特定元素节点属性;

1.getElementById()

// 方法接收一个参数:获取元素的ID;
// 如果找到相应的元素则返回该元素的HTMLDivElement对象;如果不存在,则返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了;
// 而通过这个节点对象,我们可以访问它的一系列属性;
(1).访问元素节点的属性
属性说明
tagName 获取元素节点的标签名;
innerHTML 获取元素节点里的内容,非W3C DOM规范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>测试Div;

(2).访问HTML通用属性
属性说明
id 元素节点的id名称;
title 元素节点的title属性值;
style CSS内联样式属性值;
className CSS元素的类;

document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 获取title;

document.getElementById('box').style; // 获取CSSStyleDeclaration对象;
document.getElementById('box').style.color; // 获取style对象中的color的值;也就是设置在元素行内的样式值;
document.getElementById('box').style.color='red'; // 设置style对象中的color的值;

document.getElementById('box').className; // 获取class;
document.getElementById('box').className='pox'; // 设置class;

document.getElementById('box').bbb; // 获取自定义属性的值,非IE不支持;

2.getElementsByTagName()
// 方法返回一个对象数组HTMLCollection(NodeList)数组,这个数组保存着所有相同元素名的节点列表;
document.getElementsByTagName('*'); // 利用通配符获取所有元素;
// PS:IE在使用通配符时,会把文档最开始的html的规范声明当作第一个元素节点;

document.getElementsByTagName('li'); // =>[object HTMLCollection];获取所有li元素;
document.getElementsByTagName('li').[0]; // 获取第一个li元素;

3.getElementsByName()

获取相同名称(name)设置的元素,返回一个对象数组HTMLCollection(NodeList);
document.getElementsByName('add'); // 获取具有name='add'的input元素集合;
// PS:对于并不是HTML合法的属性,那么在JS获取的兼容性上也会存在差异;
// IE支持合法的name属性,但对于自定义的属性会出现不兼容问题;

4.getAttribute()
方法将获取元素中某个属性值;
但它和直接使用".attr"获取属性值的方法有一定区别;
document.getElementById('box').getAttribute('mydiv'); // 获取自定义属性值;
document.getElementById('box').mydiv; // 获取自定义属性值,仅IE支持;

5.setAttribute()
方法将设置元素中某个属性和值;接收两个参数:属性名和值;
如果属性本身已存在,那么就会覆盖;
document.getElementById('box').setAttribute('align','center'); // 设置属性和值;
// PS:在IE7及以下,使用setAttribute()方法设置class和style属性没有效果;

6.removeAttribute()
方法可以移除HTML属性;
document.getElementById('box').removeAttribute('style'); // 移除style样式属性;

三 DOM节点

1.node节点属性

// 节点可以分为:元素节点/属性节点和文本节点;
// 这些节点都有三个属性:nodeName/nodeType和nodeValue;

信息节点属性
节点类型 nodeName nodeType nodeValue
元素元素名称 1 null
属性属性名称 2 属性值
文本 #text 3 文本内容
document.getElementById('box').nodeType; // =>1; 元素节点;

2.层次节点属性
// 层次节点可以划分为:父节点与子节点/兄弟节点;

// 当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点;

JavaScriptDOM基础_基础知识 - 文章图片

节点关系示意图

层次节点属性
属性说明
childNodes 读取当前元素节点的所有子节点;
firstChild 读取当前元素节点的第一个子节点;
lastChild 获取当前元素节点的最后一个子节点;
ownerDocument 获取该节点的文档根节点,相当于document;
parentNode 获取当前节点的父节点;
previousSibling 获取当前节点的前一个同级节点;
nextSibling 获取当前节点的后一个同级节点;
attributes 获取当前元素节点的所有属性节点集合;

(1).childNodes属性

属性获取某一个元素节点的所有子节点,这些子节点包含元素节点和文本节点;
PS:使用childNodes[n]返回子节点对象的时候,有可能返回的是元素子节点,比如:HTMLElement;
也可能返回的是文本子节点,比如:Text;
元素子节点可以使用nodeName或者tagName获取标签名称;而文本子节点可以使用nodeValue获取;
var box = document.getElementById('box');
for(var i=0; i<box.childNodes.length; i++){
判断是元素节点,输出元素标签名;
if(box.childNodes[i].nodeType === 1){
console.log('元素节点:'+box.childNodes[i].nodeName);
判断是文本节点,输出文本内容;
}else if(box.childNodes[i].nodeType ===3){
console.log('文本节点:'+box.childNodes[i].nodeValue);
}
}
PS1:在获取到文本节点(重点在于已经不是元素节点)的时候,是无法使用innerHTML这个属性输出文本内容的;
这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本;
alert(box.innerHTML); innerHTML和nodeValue第一个区别;

PS2:innerHTML和nodeValue在赋值的时候,nodeValue会把包含在文本里的HTML转义成特殊的字符,从而达到形成纯文本的效果;
而innerHTML会解析文本里的特殊字符;
box.childNodes[0].nodeValue = 'abc'; =>abc;
box.innerHTML = 'abc'; =>abc(样式加粗);

(2).firstChild和lastChild属性
firstChild = childNodes[0];获取当前元素的第一个子节点;
lastChild = childNodes[box.childNodes.length-1];获取当前元素最后一个子节点;

(3).ownerDocument属性
返回该节点的文档对象根节点,返回的对象相当于document;
alert(box.ownerDocument === document); // =>true;根节点;

(4).parentNode/previousSibling/nextSibling属性

parentNode:返回该节点的父节点;
previousSibling:返回该节点的前一个同级节点;
nextSibling:返回该节点的后一个同级节点;
alert(box.parentNode.nodeName); // 获取父节点的标签名;
alert(box.firstChild.nextSibling); // 获取第二个节点;
alert(box.lastChild.previousSibling); // 获取倒数第二个节点;

(5).attributes属性
属性返回该节点的属性节点集合;
alert(document.getElementById('box').attributes); // =>NamedNodeMap;

(6).忽略空白文本节点

四节点操作
// DOM不单单可以查找节点,也可以创建节点/复制节点/插入节点/删除节点和替换节点

节点操作方法
方法说明
write() 这个方法可以把任意字符串插入到文档中;
createElement() 创建一个元素节点;
appendChild() 将新节点追加到子节点列表的末尾;
createTextNode() 创建一个文件节点;
insertBefore() 将新节点插入在前面;
replaceChild() 将新节点替换旧节点;
cloneNode() 复制节点;
removeChild() 移除节点;

(1).write()方法
// write()方法可以把任意字符串插入到文档中去;
document.write('

这是一个段落!

'); // 解析后文字;

(2).createElement()方法
createElement()方法可以创建一个元素节点;
document.createElement('p'); // [object HTMLParagraphElement];

(3).appendChild()方法
appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上;
var box = document.getElementById('box');
var p = document.createElement('p'); // 创建一个新元素节点

;
box.appendChild(p); // 把新元素节点

添加子节点末尾;

(4).createTextNode()方法
该方法创建一个文本节点;
var text = document.createTextNode('段落');
p.appendChild(text); // 将文本节点添加到子节点末尾;

(5).insertBefore()方法

(6).replaceChild()方法
该方法可以把节点替换成指定的节点;
box.parentNode.replaceChild(p,box); // 把

换成了

;

(7).cloneNode()方法

// 该方法可以把子节点复制出来;复制后返回的节点副本属于文档所有,但并没有为它指定父节点;
// 参数为true:执行深复制,就是复制节点及其整个子节点树;
// 参数为false:执行浅复制,只复制节点本身;
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); // 获取第一个子节点,true表示复制内容;
box.appendChild(clone); // 添加到子节点列表末尾;

(8).removeChild()方法
该方法删除指定节点;
box.parentNode.removeChild(box);

小结:在下一章~

内容总结

以上是互联网集市为您收集整理的JavaScriptDOM基础_基础知识全部内容，希望文章能够帮你解决JavaScriptDOM基础_基础知识所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/324914.html

来源：【匿名】

【上一篇】使用window.prompt()实现弹出用户输入的对话框_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScriptDOM基础_基础知识】教程文章相关的互联网学习教程文章

Javascript基础知识盲点总结——数据类型和数组

一、javascript总的基本类型1.javascript中的基本类型共有五种：数字、字符串、布尔值、undefined、null其中null和undefined最大的区别在于，被赋予null的变量通常被认为是已经定义了的。2.除了以上五种基本类型外，其他的数据类型都属于对象。二、利用typeof方法查看数据类型在javascript中可以通过typeof方法来查看某个变量或值得数据类型。该方法会返回一个代表数据类型的字符串，可能返回的值包括：number,string, boolean, un...

JavaScript 之基础知识【代码】

JavaScript 基础知识JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript 很容易使用！你一定会喜欢它的！ JavaScript 简介在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，...

JavaScript基础知识(javaSctipt深入浅出学习)【代码】【图】

1、javascript的数据类型　　1.1 javaScript是弱类型的语言，也就是说它没有显示的指定类型，通常说有6中基本类型　　　　分别是5种原始类型（number, String, boolean, null, undefined）和一种对象类型（包括数组，函数等...）　　1.2 javaScript的隐式转换，加号和减号　　1.3 严格等于（‘===‘）：　　　　类型不同会返回false， null === null, undefined === undefined　　　　NaN != NaN(不严格相等), new Object != new ...

Javascript基础知识盲点总结——函数

一、函数中的arguments对象每个函数内部都有一个arguments，它能返回函数所接受的所有参数注意：argumens接收的是实参如下是利一个利用arguments特性编写的求和函数：function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I < number_of_params; i++){res += arguments[i]; } return res; } 二、关于变量的作用域在javascript中，不能为变量定义特定的块级作用域，但是可以定义其所属的...

JavaScript基础知识（变量/引用/转换/函数）【代码】【图】

———————————————————————————————————————————— 变量全局变量：在函数体外声明，全局可以使用局部变量：通过关键字var来声明变量类型 1 <script type="text/javascript">2var a;3// 十进制 4 a = 1;5 a = 1.2;6 a = -23;7 a = .23e4;8 a = 3e-2;9// 十六进制10 a = 0xABCDE; 11 a = 0Xff; 12// 八进制13 a = 0123; 14 a = 01234567; 15// ...

javascript基础知识(7) 条件判断【代码】

JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如下：var age = 20; if (age >= 18) { // 如果age >= 18为true，则执行if语句块alert(‘adult‘); } else { // 否则执行else语句块alert(‘teenager‘); }其中else语句是可选的。如果语句块只包含一条语句，那么可以省略{}：var age = 20; if (age >= 18)alert(‘adult‘); elsealert(‘teenager‘);省略{}的危险之处在于，...

javascript基础知识【代码】

1、javascript 　　表单验证，减轻服务器压力　　制作网页特效　　动态改变页面内容　　基于对象和事件驱动的，具有安全性能的脚本语言　　交互，脚本语言。解释性语言，边执行边解释2、script标签添加位置 1） head标签中 2）Body标签中 3）</body>与</html>闭合标签之中3、输出输出内容为字符串时必须加引号； 1）document.write(""); // 可以在页面输出标签 html、文档内容 2）alert("") //弹出警告框 ...

JavaScript基础知识（数据类型）【代码】

数据类型布尔：true/fasleconsole.log(typeoftrue);// "boolean"Number : true -->1 false -->0console.log(Number(true)); console.log(Number(false));Boolean : 把其他数据类型转换布尔值；console.log(Boolean(12));//true console.log(Boolean(10));//true console.log(Boolean(0));//false console.log(Boolean("{}"));//true console.log(Boolean("12px"));//true console.log(Boolean([]));//true console.log(Boolean({})...

JavaScript 基础知识梳理——事件【图】

事件1）事件是文档或浏览器窗口中发生的特定的交互瞬间。JavaScript和HTML之间的交互是通过事件实现的。2）事件流——描述的是从页面中接受事件的顺序IE——事件冒泡流Netscape——事件捕获流3）事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的哪个节点）接收，然后逐级向上传播至最不具体的哪个节点（文档）。click事件在input触发，它会一级一级往上冒，直到冒到document上点击按钮不但触发了按钮，也触发了div、bo...

javascript基础知识(6) 对象【代码】

对象JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他：var xiaoming = {name: ‘小明‘,birth: 1990,school: ‘No.1 Middle School‘,height: 1.70,weight: 65,score: null };JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，...

js基础知识整理笔记一【代码】【图】

1.在博客园看到一篇的随笔，学到以下： $(选择器).click(function(){}):当选中的选择器被点击时触发回调函数，只针对页面也存在的选择器1 <script> 2 $(function() { 3 $(‘ul>li‘).click(function() { 4 console.log($(this).html()); 5 }); 6 $(‘ul‘).append(‘<li>5</li><li>6</li>‘); 7 }) 8 </script>选择器中ul>li表示只有ul标签下的li标签，log里面的this代表ul>li选择器ap...

Javascript 基础知识整理【代码】

1.Javascript的作用JavaWeb里面 html: 负责网页架构，显示内容、数据。css: 负责样式、格式的显示。javascript: 负责完成页面的交互、网页的行为。2.Javascript的三种写法1).直接在html里面写。<a href="javascript:alert(‘东方闪电‘)">超链接</a> <h4 onclick="javascript:alert(111)">点击</h4>2).<script>标签可以写在head body 里面或html外面。3).使用外部文件引入的方式：首先新建一个js文件 demo.js 记住：所有外部Ja...

JavaScript简介及基础知识(1)【代码】【图】

1、JavaScript是什么—它是个脚本语言，需要宿主文件，它的宿主文件是html文件。 Javascript是一种脚本语言，比HTML要复杂。不过即便你先前不懂编程，也不用担心，因为Javascript写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较的Javascript代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以让Javascript本身也变得非常受欢迎，从而被广泛应用。...

javascript——基础知识——Object

Object对象是javascript中所有对象的父对象，它的所有方法和属性在所有其他对象中都可用。提供所有 JavaScript 对象共有的功能。当然这些方法可以在用户定义的对象中重新定义，JavaScript 将在适当的时候调用这些方法。属性：属性说明__proto__ Property为对象指定原型。仅 IE11支持constructor 指定创建一个对象的函数。prototype 为对象的类返回原型的引用。方法：功能描述Object.create 创建一个具有指定原型且可选择性地包...

JS基础知识-01

01-浅谈前端发展史第一阶段：C/S(client server)->B/S(browser server) 网页制作技术栈：PhotoShop、HTML、CSS第二阶段：从静态到动态,从后端到前端前端开发工程师前后端分离后台：完成数据的分析和业务逻辑编写(包含API接口编写)前端：网页制作、JS交互效果、数据的交互和绑定技术栈：JavaScript、Ajax(跨域技巧)、jQuery...第三阶段：从前端到全端(从PC端到移动端) H5、CSS3、响应式布局开发、Zepto、Hybrid(混合APP开发)、...

首页 / JAVASCRIPT / JavaScriptDOM基础_基础知识

JavaScriptDOM基础_基础知识

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScriptDOM基础_基础知识】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

DOM - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程