慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

PaulPierce

TextNode 元素没有innerHTML属性. 想输出其内容.
使用TextNode.nodeValue.因为文本元素的nodeValue是其本身的Text.

查看全部

0 采集收起来源：创建文本节点createTextNode
2019-01-04
慕斯卡7430691
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
```
elementNode.childNodes
```
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
运行结果:
IE:
```
  UL子节点个数:3   节点类型:1
```
其它浏览器:
```
   UL子节点个数:7    节点类型:3
```
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:
如果把代码改成这样:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
运行结果:（IE和其它浏览器结果是一样的）
```
  UL子节点个数:3   节点类型:1
```
任务
试一试，在script标签内，获取子节点，并输出相应属性。
1. 获取第一个DIV的子节点。
2. 使用for遍历每个节点。
3. 输出相应节点的属性。
注意: 输出内容可能和想的内容不同，想想为什么。
查看全部

0 采集收起来源：访问子节点childNodes
2019-01-04
慕斯卡7430691

节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
任务
试一试，在<script>的标签内容，获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型。

查看全部

0 采集收起来源：节点属性
2019-01-04
慕斯卡7430691
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
```
elementNode.setAttribute(name,value)
```
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
任务
试一试，使用getAttribute()和setAttribute()方法，完成下面的任务:
在第21行补充代码，使用getAttribute()方法获取元素属性值，保存在变量text。
在第25行补充代码，使用setAttribute()方法设置title属性值。
查看全部

0 采集收起来源：setAttribute()方法
2019-01-04
FreudLi
removeChild() 方法从子节点列表中删除某个节点
语法:
```
nodeObject.removeChild(node)
```
参数:
node ：必需，指定需要删除的节点。
parentNodeObject.removeChild(node)
查看全部

0 采集收起来源：删除节点removeChild()
2019-01-04
慕斯卡7430691
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
```
document.getElementsByTagName(Tagname)
```
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
看看下面代码，通过getElementsByTagName()获取节点。

任务
试一试，使用三种获取节点的方法，完成下面的任务:
在第73行补充代码，通过ID获取标题H1。
在第78行补充代码，通过name获取值为sex的元素。
在第84行补充代码，通过标签名获取input元素。
查看全部

0 采集收起来源：getElementsByTagName()方法
2019-01-04
慕斯卡7430691
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
```
document.getElementsByTagName(Tagname)
```
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
看看下面代码，通过getElementsByTagName()获取节点。

任务
试一试，使用三种获取节点的方法，完成下面的任务:
在第73行补充代码，通过ID获取标题H1。
在第78行补充代码，通过name获取值为sex的元素。
在第84行补充代码，通过标签名获取input元素。
查看全部

0 采集收起来源：getElementsByTagName()方法
2019-01-04
慕斯卡7430691
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
```
document.getElementsByName(name)
```
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
看看下面的代码:
运行结果:

任务
试一试，通过name属性来查询元素:
补充第6行代码，获取 name 为 myt 的元素，同时输出获取的元素节点的长度。
查看全部

0 采集收起来源：getElementsByName()方法
2019-01-04
慕斯卡7430691

认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性:
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。

任务
在JavaScript入门篇中，对DOM进行了基础讲解（http://www.imooc.com/learn/36），我们通过任务来回顾下。
在右边编辑器第11行补充代码，通过getElementById获取id为con的h2标签。
在右边编辑第12行补充代码，修改h2标签的样式，将颜色设为红色。
在右边编辑器第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。
在右边编辑第14行补充代码，通过style.display实现隐藏。

查看全部

0 采集收起来源：认识DOM
2019-01-04
莫问归途何往
```
document.getElementsByName(name)
```
通过元素的name属性查询元素
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
查看全部

0 采集收起来源：getElementsByName()方法
2019-01-03
莫问归途何往

文档对象模型DOM（Document Object Model）

查看全部

0 采集收起来源：认识DOM
2019-01-03
PaulPierce

<i id=pp>fuck you</i> fuck you 是这个pp原素的innerHTML 同时也是pp的childNode.. 可以通过 pp.appendChild(TextNode) 改变其中的文字, 增加的文字也是具有这个标签的特性, 这里是斜体字.
innerHTML是pp原素的childNode.
如果使用 pp.parentNode.insertBefore(pp,TextNode); 相当于在比pp前手动输入文字, 增加的文字的是不具有标签的斜体特性.

查看全部

0 采集收起来源：替换元素节点replaceChild()
2019-01-03
qq_慕粉909474

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">

//第一步把之前的数据写成一个数组的形式,定义变量为 infos
var infos=new Array();
infos=[
["小A","女",21,"大一"],
["小B","男",23,"大三"],
["小C","男",24,"大四"],
["小D","女",21,"大一"],
["小E","女",22,"大四"],
["小F","男",21,"大一"],
["小G","女",22,"大二"],
["小H","女",20,"大三"],
["小I","女",20,"大一"],
["小J","男",20,"大三"],
];
var info=new Array();
var num= 0;
//第一次筛选，找出都是大一的信息
//document.write("第一部分："+"<br/>");
for(var i=0;i<=infos.length;i++){
for(var j=0;j<=infos[i].length;j++){
if(infos[i][j]=="大一"){
info [num]=infos [i];
num++;
}
}
}
//第二次筛选，找出都是女生的信息
// document.write("第二部分："+"<br/>");
for(var i=0;i<=info.length;i++){
for(var j=0;j<=info[i].length;j++){
if(info[i][j]=="女"){
document.write(info[i][0]);
}
}
}

</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-01-03
莫问归途何往
思路分析:
先了解要求,在将要求细化,一步步实现
1. 编写网页布局
2. 获取显示秒数的元素,通过定时器来更改
3. 通过location和history对象来实现网页跳转
在当前窗口跳转到一个新页面的实现方法:
window.location.href = "https://www.imooc.com"
在a标签中注册事件的写法:
<a href="javascript:GoBack()">返回</a>
查看全部

0 采集收起来源：编程练习
2019-01-03
慕粉4395650

getYear() 方法可返回表示年份的两位或四位的数字
getFullYear() 方法可返回一个表示年份的 4 位数字
getMonth()从0开始，要获取当前月份要+1
getDay()返回值从0开始，星期天为0
编程练习：先把字符串；分割，添加到一个新的数组中，遍历数组把成绩取出，小明：87格式，只有一个：，获取:的indexof角标，然后+1就是成绩的，接着提取字符串，因为substring()是start到stop-1，所以用substr()。这个是字符串，转换为int类型才能加减，用parseInt，平均分就四舍五入Math.round,人数就是数组长度

查看全部

0 采集收起来源：编程练习
2019-01-03