JavaScript 基础05-JS DOM

发表于 分类于 阅读次数：

DOM

1. DOM基本介绍

DOM 是 Document Object Model 文档对象模型

  • HTML DOM
  • XML DOM

2. HTML DOM 对象参考

  • 2.1 document 对象

    • 属性:
      • domain
      • lastModified
      • referrer
      • URL
      • cookie
      • 集合属性all 获取所有元素(IE中为true,非IE为false)
    • 方法:

  • 2.2 form 对象
    属性:

    1
    2
    -length 元素个数
    -elements 元素数组

    方法:

    - submit() 提交指定的表单
- reset()  重置指定的表单

    事件:

        -onsubmit="return false"    阻止提交表单,submit()方法可绕过
    -onreset="return false"     阻止重置表单,reset()方法可绕过

  • 2.3 image 对象

  • 2.4 anchor 对象

  • 2.5 base 对象

  • 2.6 canvas 对象
    http://echarts.baidu.com/

  • 2.7 Event 对象

  • 2.8 input 系列对象

    • blur()
    • focus()
    • select()
      复制 flash或clipboard.js组件

  • 2.9 select 对象

  • 2.10 option 对象

  • 2.11 style 对象

  • 2.12 table 对象

  • 2.13 tableRow 对象

  • 2.14 tableCell 对象

3.XML DOM 节点

1.节点介绍

  • 1.1 什么是节点 node

HTML 文档中 所有的组成部分 称之为节点

  • doucment 文档

  • element 标签

  • attr 属性 (attribute)

  • comment 注释

  • text 文本

  • 1.2 节点树
    子节点
    父节点
    同辈节点
    后代节点
    先辈节点

  • 1.3 节点的访问

    • 得到节点
      • doucment 文档
        document
      • element 标签
        ByID…
      • attr 属性 (attribute)
        getAttributeNode(attrname)
      • comment 注释
        子节点
      • text 文本
        子节点
    • 获取子节点
      childNodes
    • 获取子元素节点
      children
    • 获取第一个子节点
      firstChild
    • 获取最后一个子节点
      lastChild
    • 获取父节点
      parentNode
    • 获取父元素节点
      parentElement
    • 获取前一个节点
      previousSibling
    • 获取后一个节点
      nextSibling

  • 1.4 节点属性

    • nodeName
      • doucment #document
      • element 标签名
      • attr 属性名
      • text #text
      • comment #comment
    • nodeValue
      • doucment null
      • element null
      • attr 属性值
      • text 文本内容
      • comment 注释内容
    • nodeType
      • doucment 9
      • element 1
      • attr 2
      • text 3
      • comment 8

2.节点操作

2.1 获取节点

  • element ById/子节点/父节点/同辈节点/后代
  • attr getAttributeNode(‘attrname’); 获取属性节点
    element.attr; 获取属性值
getAttribute('attrname');  获取属性值

2.2 改变节点(改变节点的值) nodeValue

  • element 无意义
  • attr 
    setAttribute('attrname', 'value');
element.attr = value;

2.3 删除节点

  • attr removeAttribute(‘attrname’);
  • element 把值赋值为空 或 removeChild(node) 需要找到父节点

2.4 替换节点

  • attr setAttribute(‘attrname’, ‘value’);
  • element replaceChild(new_node, old_node) 需要找到父节点

2.5 插入节点

  • attr 
    setAttribute('attrname', 'value');
setAttributeNode('attrname');
  • element 
    appendChild(node)   追加
insertBefore(new_node, old_node)      指定位置

2.6 创建节点

  • attr document.createAttribute(attrname);
  • element document.createElement(‘tagName’);

2.7 克隆节点

  • cloneNode() 参数默认为false / 可选 true

3. XML 对象

  • node
  • nodeList
  • document
  • element
  • attr
  • text
  • comment

4. HTMLElement对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
className   类名

scrollLeft  滚动条至 左边界像素
scrollTop   滚动条至 上边界像素

offsetLeft  距离已定位父元素的 左偏移量
offsetTop   距离已定位父元素的 上偏移量

innerHTML   元素内部的内容(不含标签)
innerText   元素内部所有的文本内容
outerHTML   元素的内容(含标签)

offsetWidth  盒子模型,实际的宽: 内容+内边距+边框
offsetHeight  盒子模型,实际的高: 内容+内边距+边框

clientWidth  宽 + 内边距
clientHeight 高 + 内边距

scrollWidth  宽 + 内边距 + 计算里面元素的大小
scrollHeight 高 + 内边距 + 计算里面元素的大小

document.documentElement.clientHeight  视口高度
document.documentElement.scrollHeight  文档高度

PS. 补充

特效-全选复制按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<h1>input</h1>
<hr>

<input type="text" id="s"> <button>百度一下</button>

<hr>
<br>

<button onclick="selectAll()">全选</button>
<button onclick="copyAll()">全选复制</button>

<button class="btn" data-clipboard-target="#content">全选复制(clip)</button>
<br>
<br>
<textarea name="weibo" id="content" cols="40" rows="10">诗人对宇宙人生，须入乎其内，又须出乎其外。入乎其内，故能写之。出乎其外，故能观之。入乎其内，故有生气。出乎其外，故有高致。美成能入而不出。白石以降，于此二事皆未梦见。</textarea>


<script src="./clipboard.min.js"></script>
<script>
s.focus();

function selectAll(){
    content.select();
}

function copyAll(){
    // 判断 剪切板对象 是否可用
    if (window.clipboardData) {
        // IE
        window.clipboardData.setData('text', content.value);
        alert('已复制到剪切板!');
    } else {
        // 非IE
        content.select();
        alert('请按 Ctrl + C 复制!');
    }
}

var clipboard = new ClipboardJS('.btn');

clipboard.on('success',function(e){
    console.log(e);
    alert('已复制到剪切板(clip)');
});


</script>

特效-瀑布流效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
   <h1>瀑布流效果</h1>
   <hr>
   
   <div id="imglist">
       <img c-src="./imgs/mm021.jpg">
       <img c-src="./imgs/mm022.jpg">
       <img c-src="./imgs/mm023.jpg">
       <img c-src="./imgs/mm024.jpg">
       <img c-src="./imgs/mm025.jpg">
       <img c-src="./imgs/mm026.jpg">
       <img c-src="./imgs/mm027.jpg">
       <img c-src="./imgs/mm028.jpg">
       <img c-src="./imgs/mm029.jpg">
       <img c-src="./imgs/mm030.jpg">
       <img c-src="./imgs/mm031.jpg">
       <img c-src="./imgs/mm032.jpg">
       <img c-src="./imgs/mm033.jpg">
       <img c-src="./imgs/mm034.jpg">
       <img c-src="./imgs/mm035.jpg">
       <img c-src="./imgs/mm036.jpg">
       <img c-src="./imgs/mm037.jpg">
       <img c-src="./imgs/mm038.jpg">

   </div>

   <script>
  	var picNum = 3
   setTimeout('loadPic(picNum)',1000);
   var imgs = imglist.children;

function loadPic(x){
	// 获取所有图片节点
   	console.log(cl);
   	var i = 0;
   	var cl = setInterval(function(){
   		imgs[i].setAttribute('src',imgs[i].getAttribute('c-src'));
   		console.log(i);
   		i++;
   		if (i >= x) {
   			clearInterval(cl);
   		}
   	},10)

   }

   // if (true) {}
   
   window.onscroll = function(){
   	
    var clientY = document.documentElement.clientHeight;
    var scrollY = document.documentElement.scrollHeight;
    var top = document.documentElement.scrollTop;
    console.log(top);
    if (scrollY-clientY-1000 <= top) {
    	picNum+=1;
    	console.log(picNum);
    	loadPic(picNum);

    }
   }

   </script>