1 1.滚动条位置查询
2 document.documentElement.scrollLeft;
3 document.documentElement.scrollTop;
4
5 2.document,element,text是node的子类
6 节点树的根部是document
7
8 document.getElementById("")//id值是唯一的
9
10 document.getElementByName("")
11 //根据name属性选取元素，返回一个NodeList对象（表现为一个包含若干Element对象的只读数组
12 //name属性只在少数标签中使用，包括表单,iframe,img
13
14 getElementByTagName()
15 //document和element下都定义了这个函数
16 getElementByClassName()
17 //根据类名选择元素
18 querySelector()
19 //匹配css选择器字符串，返回第一个匹配的node
20 querySelectorAll()
21 //匹配css选择器字符串，返回一个nodelist
22
23 jQuery将这一选择器集成进了 函数$()中
24 而它的CSS选择器代码已经作为一个独立的标准库提出来并发布了，名称为Sizzle
25
26 3.操作node对象
27 parentNode//该节点的父节点
28 childNodes//只读类数组对象，是该节点子节点的实时表示
29 firstChild和lastChild//第一个子节点和最后一个子节点。如没有子节点则为null
30 nextSibling/previousSibling//该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点
31 nodeType//返回值为一个数字
32 //其中1：Element,3:Text,8:comment注释, 9:document,11:documentFragment
33 nodeValue//text和comment节点的文本内容，对其他节点使用返回null
34 nodeName//元素的标签名，以大写形式表示
35
36 4.针对element的API
37 element.children//返回一个Elementlist，但是只包含element节点
38 element.firstElementChild
39 element.lastElementChild//只访问元素节点
40
41 nextElementSibling
42 previousElementSibling//只代表兄弟元素节点
43
44 childElementCount//子元素的数量。返回值和children.length相等
45
46 5.属性
47 element.attr或者element["str"]
48 用对象属性访问方式直接访问元素的属性
49
50 element还定义两个函数
51 getAttribute()
52 setAttribute()来设置和查询非标准的element属性
53
54 html5对于非标准属性的解决方案
55 <span class="sparkline" data-ymin="0" data-ymax="10"></span>
56
57 这样在获取span节点后
58 var span=document.getElementByTagName("sparkline")[0];
59 可以利用span.dataset.ymin 直接访问定义的属性//
60
61 6.元素的内容
62 innerHTML：是element的一个属性，作为字符串标记返回该元素的内容。
63 outerHTML：同样是element的属性。返回的字符串包含标签头尾,只有element定义了outerHTML
64 且对outerHTML作修改时，元素本身会被新的内容替代
65
66 作为纯文本的元素内容：
67 paraElement.textContent
68 paraElement.innerText //仅IE支持
69
70 7.创建，插入和删除节点
71 var js=document.createElement("script")
72 js.src=url;
73 document.head.appendChild(js);//将一个脚本添加进head标签内
74
75 insertBefore(new,exist);//将new节点插入到exsit节点之前，该方法实在exist的父节点上调用
76 function insertAt(parentNode,childNode,n){
77 if(n<0||n>parentNode.childNodes.length){throw new Error("不存在的索引‘n’")}
78 else if(n===parentNode.childNodes.length){parentNode.appendChild(childNode);}
79 else{
80 parentNode.insertBefore(childNode,parentNode.childNodes[n]);
81 }
82 }//一个插入节点的例子
83
84
85 删除节点：removeChild()
86 该方法在想要删除的节点的父节点上调用
87 其用法：child.parentNode.removeChild(child);
88
89 替换节点：replaceChild(new,child);
90 child.parentNode.removeChild(document.createElement(),child);
91
92 8. 使用DocumentFragment
93 documentFragment是一种特殊的Node，它作为其它节点的一个临时容器
94 var frag=document.createDocumentFragment();
95 frag容器存储一系列的node，但是可用作replaceChild,removeChild,insertBefore,appendChild的参数
96
97 9.文档的几何尺寸
98 document.documentElement{
99 clientHeight,clientWidth 当前视口的尺寸
100 }
101
102 offsetLeft,clientLeft,scrollLeft
103
104 父级元素未定位时，是offsetparent是body
105 父级元素position:absolute或者relative时，offsetparent就是这个父级元素
106 //absolute和relative的区别:absolute定位不存在与其原定位置，而relative定位会占据其原有位置 从其原有位置开始偏移
107
108 10.html表单
109 <form>---<input><select><button>
110
111 form的属性(property)
112 action,encoding,method,target控制了表单是如何来提交数据到web服务器并如何显示的
113 js之前，要用专门的<input type="submit">和<input type="reset">来提交和重置表单
114 不过js给form对象添加了方法 submit()和reset()调用方法可以完成同样的工作
115
116 表单元素如input，共有的属性
117 type 标识表单元素的类型，只有option没有这个值
118 form 对表单元素的归属表单form的只读引用
119 name 只读的字符串，定义表单元素的name；在与服务器交互时用处很大
120 value 与name属性对应的“值”
121
122 表单和元素的事件处理程序
123 onsubmit：侦测表单提交，只能通过submit按钮触发，form.submit()函数并不会触发该事件
124 onreset:侦测表单重置，触发也只能通过reset按钮
125
126 onclick:
127 onchange:当用户改变表单元素的所代表的的值时，他们会触发change事件，值得注意的是，该事件仅在用户输完值并切换焦点focus时才会触发，而不是输入一个值马上触发！
128
时间： 2024-08-02 20:10:29