文档章节

javascript之dom基础

宋哥陈
 宋哥陈
发布于 2015/01/19 15:59
字数 372
阅读 3
收藏 0

以下测试代码,假设存在html代码为

<html>
<head>
<script type="text/javascript" src="Demo2.js">
</script>
</head>
<body>
<div id="box",style="color:red",title="标题",>测试DIV</div>
<lu>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</lu>
<input name="add" value="in",checked="true"/>
</body>
</html>

1、getElementById();

 alert(document.getElementById("box").tagName);//返回:DIV
 alert(document.getElementById("box").innerHTML);//返回:测试DIV
 document.getElementById("box").id;  //获取id
 document.getElementById("box").id="test"; //给id赋值
 document.getElementById("test").style;
 alert(document.getElementById("test").style);
 document.getElementById("test").style.color;
 document.getElementById("test").style.color='green';//改颜色为绿色
 document.getElementById("test").innerHTML="222222";//把内容改成222222

2、getElementsByTagName();

document.getElementsByTagName("*");//获取所有的节点
var arr = document.getElementsByTagName("li");//获取所有li节点
 alert(arr[0].innerHTML);//打印第一个li里面的内容
 alert(arr.item(1).innerHTML);//打印第二个li里面的内容
 alert(arr.length);////打印数字的个数

3、getElementsByName();

 var arr = document.getElementsByName("add");

 alert(document.getElementsByName("add")[0].value);

 document.getElementsByName("add")[0].value="111";

4、getAttribute();setAttribute();removeAttribute()

 alert(document.getElementById("box").getAttribute("id"));

 alert(document.getElementById("box").setAttribute("id","test"));

 alert(document.getElementById("box").getAttribute("test"));
document.getElementById("box").removeAttribute("style");

二、

var box=document.getElementById("box");

alert(box.childNodes.length);

alert(box.childNodes[0].nodeValue);

alert(box.childNodes[1].nodeValue);

alert(box.childNodes[2].nodeValue);

for(var i = 0;i<box.childNodes.length;i++){

 if(box.childNodes[i].nodeType===1){

  alert(box.childNodes[i].nodeName);

 }else if(box.childNodes[i].nodeType===3){

  alert(box.childNodes[i].nodeValue);

 }

2.1、忽略空格的几种方法

方法一、

var box=document.getElementById("box");

for(var i = 0;i<box.childNodes.length;i++){

 if(box.childNodes[i].nodeType===3 && /^\s+$/.test((box.childNodes[i].nodeValue)){

  box.childNodes[i].parentNode.removeChild[box.childNodes];

 }
 var box=document.getElementById("box");

for(var i = 0;i<box.childNodes.length;i++){

 var ret[];

 if(box.childNodes[i].nodeType===3 && /^\s+$/.test((box.childNodes[i].nodeValue)){

  continue;

 }

 ret.push(box.childNodes[i]);

三、节点操作

var box = document.getElementById("box");

var p = document.createElement("p");

var span = document.createElement("span");

box.appendChild(p);

var tmp = document.createTextNode("duanlo");

p.appendChild(tmp);

box.parentNode.insertBefore(span.box);

© 著作权归作者所有

上一篇: java反射详解
下一篇: javascript之BOM
宋哥陈
粉丝 2
博文 48
码字总数 23062
作品 0
福州
私信 提问
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0
谈谈浏览器里的JavaScript

在许多的网页前端教学或是文章书籍当中,你可能常常听到这样的说法:「HTML、CSS 与JavaScript 是网页前端三大要素」,其中: HTML 负责资料与结构 CSS 负责样式与呈现 JavaScript 负责行为与...

米淇淋
05/21
0
0
JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa
2018/06/23
38
0
重学js之JavaScript简介

注意: 本文章为 《重学js之JavaScript高级程序设计》系列第一章。 关于《重学js之JavaScript高级程序设计》是重新回顾js基础的学习。 JavaScript是一种专门为网页交互而设计的脚本语言,主要...

故事胶片
05/27
0
0
javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr
2014/05/20
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

Phpstorm2018 永久激活

1、安装phpstorm,安装包请自行官网下载 http://www.jetbrains.com/phpstorm/download/ 2、下载JetbrainsCrack.jar文件,存放至你的phpstorm执行文件同级目录下 下载JetbrainsCrack.jar 提取...

happyfish319
36分钟前
7
0
谈一谈Android进程间通信的几种方式

###来看一下Android中除了AIDL还有哪些进程间通信的方式: 1、Bundle Bundle实现了Parcelable,所以在Android中我们可以通过Intent在不同进程间传递Bundle数据。 但是在Intent 传输数据的过程...

二营长的意大利炮手
37分钟前
7
0
互联网薪资“高开低走”,你的能力是否真的可以匹配高薪?

对于国内外主流互联网大厂,技术出身似乎已经成为各大掌门人的必备标签。谷歌 CEO 桑达尔·皮查伊、马克·扎克伯格、李彦宏、马化腾、雷军等等皆为技术人出身,都曾参与了公司内部重要产品的...

Java技术剑
38分钟前
11
0
java 多线程

线程声明周期 线程的五个状态:新建,就绪,运行,阻塞,死亡。 其中就绪和运行两个状态客户互相转换,但运行到阻塞,阻塞到就绪,只能单向转换。 刚new出的线程就是【新建】状态,调用start...

雷开你的门
40分钟前
14
0
构造器Constructor是否可被overrid

构造器不能被重写,不能用static修饰构造器,只能用public private protected这三个权限修饰符,且不能有返回语句。

无名氏的程序员
44分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部