1     JS-DOM

全称:document object model

1.1 获取页面元素

getElementsByTagName():无论元素的数量是多少,都会存入数组

getElementById():

getElemnetsByClassName():不推荐使用,有兼容问题。

1.2 标签的自定义属性

1)        通过在html里直接在标签中添加属性;

2)        通过JS添加属性:标签.属性=值;

3)        setAttribute(a,b)设置值为b的属性a,

4)        getAttribute(a)获取属性a,

5)        removeAttribute(a)移除属性a;

 <input type="text" id="t" a="haha"/>

 <script>

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

     t.c="cc";

     console.log(t.c);

     console.log(t.getAttribute("c"));

     console.log("\n");

     console.log(t.id);

     console.log(t.a);

     console.log(t.getAttribute("id"));

     console.log(t.getAttribute("a"));

     console.log("\n");

     console.log(t.setAttribute("a","bibi"));

     console.log(t.setAttribute("b","lili"));

     console.log(t.getAttribute("b"));

 </script>

结果:

1.3 事件

1.3.1   三要素

1)        事件源(发生事件的对象)

2)        事件名称

3)        事件处理程序(要执行的内容)

如果分不清楚,那么举个栗子:小明被小刚打了,小明就进了医院。那么事件源就是小明,事件名称是:被打了,事件处理就是小明被送进了医院。

1.3.2   注册事件

行内:在对应的标签内添加:on+事件名=“要执行的内容”;

内嵌:

1)        在js标签内书写:对象.on+事件名=function(){执行内容}

2)        事件监听

注意:使用for循环给一组元素添加事件监听的时候,在事件处理里面千万不要出现for循环的计数器。原因:事件注册的时候是不会执行具体的事件处理代码的,所以执行事件时的计数器就会是最后执行的计数器值。

1.3.3   常用事件:

.onclick():点击

.onmouseover:鼠标进入

.onmousemove:鼠标移动

.onmouseout:鼠标移出

.onkeydown:键盘按下

.onkeyup:键盘抬起

1.4 获取内容

1)        对象.innerHTML:包括标签及文字内容

2)        对象.innerText:只包含文字内容,早期火狐不支持

3)        对象.textContent:只包含文字内容,早期ie不支持

1.5 节点

1.5.1   节点的组成

三种节点

nodeType

nodeName

nodeValue

标签(元素)

1

标签名

Null

属性

2

属性名

属性值

文本(内容)

3

#text

文本内容

<ul id="ul">
<li>111</li>
<li>222</li>123
<li id="li">333</li>
<li>444</li>
</ul>
 <script>
var ul = document.getElementById("ul");
var ulId=ul.getAttributeNode("id");
console.log(ulId.nodeName);
console.log(ulId.nodeType);
console.log(ulId.nodeValue); var li = document.getElementById("li");
var lis = ul.childNodes;
for (var i=0;i<lis.length;i++) {
console.log(lis[i].nodeName);
console.log(lis[i].nodeType);
console.log(lis[i].nodeValue);
}
</script>

结果:

    

1.5.2   节点的获取

父节点:parentNode;

子节点:

childNodes:标准的DOM属性,获取所有,包括文本节点,IE8及以前会忽略空白文本节点

children:非标准DOM属性,只获取元素(标签)节点,所有浏览器都支持。

兄弟节点:

previousSibling:IE8及以前会忽略空白文本节点

previousElementSibling:IE8及以前不支持

nextSibling:IE8及以前会忽略空白文本节点

nextElementSibling:IE8及以前不支持

<ul id="ul">

    <li>111</li>

    <li>222</li>123

    <li id="li">333</li>123

    123<li>444</li>

</ul>
 <script>

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

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

     console.log(ul.childNodes);

     console.log(ul.children);

     console.log(li.parentNode);

     console.log(li.previousSibling);

     console.log(li.previousElementSibling);

     console.log(li.nextSibling);

     console.log(li.nextElementSibling);

 </script>

在chorm中的执行结果:

 

IE8中的结果:

总结:

 

Chorm,firefox

IE8及以前

.childNodes

标签节点+文本节点

标签节点+非空文本节点

.children

标签节点

标签节点

.previousSibling

标签节点||文本节点

非空文本节点||标签节点

.previousElementSibling

标签节点

Undefined

.nextSibling

标签节点||文本节点

非空文本节点||标签节点

.nextElementSibling

标签节点

Undefined

1.5.3   操作节点

.cloneNode(boolean):复制节点,true全部克隆,false只克隆当前标签节点

.appendChild():追加节点到末尾

<ul id="ul">
<li>1111</li>
<li>2222</li>
<li id="li">3333</li>
<li>4444</li>
</ul>
 <script>
var ul=document.getElementById("ul");
var li=document.getElementById("li");
ul.appendChild(li.cloneNode(true));
ul.appendChild(li.cloneNode(false));
ul.appendChild(ul.cloneNode(true));
</script>

结果:

.removeChild():移除子节点

.insertBefore(a,b):将子元素a插入到b之前

1.6 动态 创建元素

document.write();注意:写在函数内会覆盖原来的页面元素

innerHTML注意:使用它拼接字符串效率非常低

document. createElement("标签名")

JS-DOM基础的更多相关文章

  1. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  2. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. 原生js dom记忆的内容

    1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...

  4. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  5. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  6. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  7. DOM基础(四)

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  8. DOM基础(二)

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  9. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  10. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

随机推荐

  1. 复旦大学2015--2016学年第一学期(15级)高等代数I期末考试第八大题解答

    八.(本题10分)  设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...

  2. 《Spring MVC学习指南》怎么样?答:书名具有很大的欺骗性

    2016年6月21日 最近,因为工作需要,我从网上买了一本<Spring MVC学习指南>,ISBN编号: 978-7-115-38639-7,定价:49.00元.此书是[美]Paul D ...

  3. 【leetcode❤python】 6. ZigZag Conversion

    #-*- coding: UTF-8 -*- #ZigZag Conversion :之字型class Solution(object):    def convert(self, s, numRow ...

  4. C/C++内存泄露探测

    1. Visual Leak Detector for VC 在安装后, 只需要包含vld.h头文件即可.内容可以输出到文件或者控制台.

  5. RecyclerView 制作瀑布流图片

    这是瀑布流的效果图 RecyclerView(ListView的升级版) 加载图片用的是第三方图片加载框架 ------------------------------------- 在Xml中 &l ...

  6. 关于json-p

    关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...

  7. dubbo & zookeeper & springMVC

    一.安装准备 1.环境简介 名称 版本 OS Mac OS X 10.11.5 JDK 1.8.0_51 dubbo 2.5.4 tomcat 8.0.35 Zookeeper 3.4.8 maven ...

  8. mybatis+oracle添加一条数据并返回所添加数据的主键问题

    最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...

  9. C#中使用Linq实现全外连接

    每次使用都到处查阅,现在记录下来,备查. var fulljoin = (from s in sampleRegistersjoin t in tensionDatas on new { Beach ...

  10. SQLiteOpenHelper的使用

    一.SQLiteOpenHelper的使用说明: 1. SQLiteOpenHelper时一个抽象类,子类必须实现的方法: *: onCreate(),数据库第一次被创建时调用,在里面可以执行创建表, ...