1545人阅读
JavaScript（1）
&&&&& 简介：以一种独立于平台和语言的方式访问和修改（添加、移动、改变或移除的方法和属性）一个文档（主要是网页）的内容和结构。是表示和处理一个HTML或XML文档的常用方法。
&&&&& 节点的定义：D（Web网页文档）O（document对象）M（网页文档的树形结构）M中树形结构可以理解为由节点组成。把每个标签看作一个节点。
&& && 节点的分类：以一个完成的标签为例&div id =&box&&测试Div&/div&
&&&&&&&&&&& 元素节点：是标签&div&&/div&
&&&&&&&&&&& 文本节点：是标签内的纯文本，测试Div
&&&&&&&&&&& 属性节点:&& 是标签的属性，id=&box&
& & & & & & & & & &
二、获取节点：
&&&& & 既然要对页面进行操作首先获取界面的内容，主要是通过获取节点来对页面内容来进行操作。下面提供部分界面html，后面的js代码主要对给代码进行操作。
界面html：
&span&开始&/span&
&div name=&test&
id = &box&
aaa =&bbb&
&p&测试Div1&/p&
&p&测试Div2&/p&
&p&测试Div3&/p&
&div id =&pox&&测试&em&倾斜&/em&结尾&/div&
&span&结束&/span&
1、元素节点
（1）获取元素节点
& && && 1)getElementById() :通过特定的ID来获取元素节点。
&& & && js代码：&&
window.onload=function(){
var box = document.getElementById('box');
alert(box);
//返回值HTMLDivElement表示Div的节点对象
lert(box.tagName);
//返回元素节点对象的标签名
&&&&&&&& <span style="font-size:18 color:#)getElementByTagNamename()& :通过元素节点名获取相同元素节点名的集合
&&& && && js代码：&&&
window.onload=function(){
var p = document.getElementsByTagName(&#39;p&#39;);
//返回一个数组集合，HTMLCollection
alert(p.length);
//返回p数组的数量
alert(p[0]);
//返回p的节点对象
alert(p.item(0));
alert(p[0].tagName);
alert(p[0].innerHTML);
//返回节点的文本内容：测试Div1
var all= document.document.getElementsByTagName(&#39;*&#39;);
alert(all.length)
//网页中所有节点的数量
&#160;} &&&&& 3)getElementByName()&& :通过name属性的&#20540;获取元素节点的集合。
js代码：& & &pre name=&code& class=&javascript&&
window.onload=function(){
var box = document.getElementsByName(&#39;test&#39;)[0];
alert(box);
//返回节点对象
&&&&& 说明：name属性一般出现在表单中，在其他节点中添加name属性会认为为不合法属性，Firefox和Google可以获取HTML中不合法的name，低版本的IE获取不到。
- - - - - - - - - - - - - - - - - - - -- - - - - - - -
- - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - -
（2）通过节点属性得到元素
&&& 1）node属性：来获取节点的名称、类型、&#20540;。
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.nodeName);
alert(box.nodeType);
alert(box.nodeValue);
//显示null
原因元素节点本身没有内容
};注意：node只能获取当前节点的东西，在上面的js代码中node本身把节点指针放在元素&div&&/div&上，所以本身没有value&#20540;，
&&&& 2）层次节点属性：层级节点可以分为父子节点和兄弟节点，通过当前节点可以获取其他层次的节点。
&&&& 2.1）子节点childNodes、第一个字节点firstChilds、最后一个子节点lastChilds。
&&&& js代码：
window.onload=function(){ 子节点
var pox = document.getElementById(&#39;pox&#39;);
alert(pox.childNodes.length) //子节点数量
alert(pox.childNodes[0].nodeValue); // 第一个子节点的内容
alert(pox.firstChild.nodeValue);
// 第一个子节点的内容
alert(pox.lastChild.nodeValue); // 最后一个节点的内容
&&&& 2.2）父节点parentChild、兄弟节点previousSibing,nextSibing。
&&&& js代码：
window.onload=function(){
父节点，上下节点
var pox = document.getElementById(&#39;pox&#39;);
alert(pox.parentNode);
//pox节点的父节点body节点
alert(pox.firstChild.nextSibling);
//pox节点的子节点中第一个节点的下一个节点
alert(pox.lastChild.previousSibling);
//pox节点的子节点中最后一个节点的上一个节点
alert(pox.lastChild.previousSibling.nodeName)
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - --
- - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - -
- - - - -&
2、属性节点
&&&& 1)直接.出HTML属性的属性&#20540;。&&&&
&&&&& js代码：
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.id);
//返回值为box
alert(box.aaa);
// 不显示定义的属性值。返回undefined
alert(box.class); //返回undefined
class为js的关键字
alert(box.className);
//返回class属性的值cd
&&&& 2）getAttribute()获取某个属性的属性&#20540;。
&&&& js代码：
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.getAttribute(&#39;aaa&#39;))
//这种方式可以获得自定义属性的属性值。
alert(box.getAttribute(&#39;className&#39;)) //返回为null
alert(box.getAttribute(&#39;class&#39;) )
//返回class属性的属性值
&&&& 3）通过节点属行获得
&&&&& js代码：
window.onload=function(){
var pox = document.getElementById(&#39;pox&#39;);
alert(box.attributes);
//集合数组，保存元素节点的属性列表
alert(pox.attributes.length);
//该节点的属性的个数
alert(pox.attributes[0]);
，属性节点
alert(pox.attributes[0].nodeName); //第一个属性的属性名
//遍历属性集合读取属性的时候，是从后向前进行的。
&&&& 4）setAttribute()设置属性
&&& & js代码：
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.setAttribute(&#39;title&#39;,&#39;标题&#39;))
//添加title属性和值
alert(box.setAttribute(&#39;style&#39;,&#39;color:red&#39;)) //添加style属性和值
&&&& 5）removeAttribute()移除属性
& & & js代码：
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.removeAttribute(&#39;title&#39;))
//移除title属性
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - --
- - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - -
3、内容节点
&&&& 1）innerHTML获取当前元素节点的文本内容
&& && js代码：
window.onload=function(){
var box = document.getElementById(&#39;box&#39;);
alert(box.innerHTML);
//显示当前元素节点中的文本内容（包括HTML）
//var box = document.getElementById(&#39;box&#39;);
//box.innerHTML=&#39;玩转&strong&JS&/strong&&#39;; //赋值，可以解析里面的HTML。
&&& 2）文本节点nodeVlaue和innerhTML的区别
window.onload=function(){
var pox = document.getElementById(&#39;pox&#39;);
pox.childNodes[0].nodeValue=&#39;测试&strong&Pox&/strong&&#39;;
//测试&strong&Pox&/strong&倾斜结尾
//pox.innerHTML=&#39;测试&strong&Pox&/
测试Pox（Pox大写）
注意：区别1：前者把赋&#20540;的文本中html解析为特殊字符，后者当做html来显示。
&&&&&&&&&&&区别2：前者是得到文本节点来显示文本，后者是通过元素节点（.）点出该节点的文本内容。
&&&&&& 主要讲解了下Dom基础中如何获得三种的节点，然后通过三种节点来进行基本的操作，Dom作为对页面的操作还有更多的内容需要学习，而且只有在应用中才能更好的理解。现在只是基本的知识总结，以后随着认识的加深在做相应的总结。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：53769次
积分：2481
积分：2481
排名：第12908名
原创：80篇
评论：677条
(4)(4)(4)(4)(4)(4)(4)(3)(1)(2)(2)(1)(1)(1)(4)(2)(3)(4)(5)(2)(1)(2)(2)(3)(3)(1)(1)(2)(1)(2)(3)扫二维码下载作业帮
1.75亿学生的选择
下载作业帮安装包
扫二维码下载作业帮
1.75亿学生的选择
请高手做下数据结构的选择题 谢谢！！！！！！！！！！！1， 在单链表中的指定元素前插入一个数据元素，必须_______。A， 先找到指定元素节点的前驱结点，然后再实施插入操作。B， 先找到指定的元素节点，然后再实施插入操作。C， 先找到指定的元素节点的后继结点，然后再实施插入操作。D， 先实施数据元素的后移操作，然后再实施插入操作。2.(无)
3， 一棵深度为7的二叉树最多有_____结点。（根节点的层次为第一层） A，128个
D，255个4， 带全图的连接点间的路径长度是指__________。A， 连接点间的最大领接边的全值B， 路径上所有经过的所有边的条数C， 路径上所经过的边的权值之和D， 两结点间所有邻街边的权值之和5， 顺序查找算法的平均查找长度为__________。A，Log2 的N
C，N* Log2的N
D，N的平方
乖乖083ucz
扫二维码下载作业帮
1.75亿学生的选择
为您推荐：
扫描下载二维码CSS 相邻兄弟选择器到底是获得指定元素的上一个元素还是获得指定节点的上一个节点？
我觉得的这里有一点问题，应该是获得指定元素的上一个元素，而不是指定节点的上一个几点!
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2