- 选择节点的方法:
- DOM选择元素方法:
- document.getElementByID('id名'); 。
兼容性:ie8以下会把name属性看做id属性。 - document.getElementsByTagName('标签名'); 。(常用)
兼容性:都好使。 - document.getElementsByClassName('类名'); 。
兼容性:ie8及以下没有这个方法。 - document.getElementsByName('name属性值'); 。
兼容性:以前的浏览器只有部分标签的name属性可以生效。
- document.querySelector('css选择器写法'); 。
选出来是一个。
兼容性:ie7及以下没有这个方法。
且这个方法选的元素不是实时的。所以不用。 - document.querySelectorAll('css选择器写法'); 。
选出来是一组。
兼容性:ie7及以下没有这个方法。
且这个方法选的元素不是实时的。所以不用。
- document.getElementByID('id名'); 。
- 遍历节点树:(通过一个相关的节点选择目标节点)
兼容性是全浏览器都好使。- 节点.parentNode 。父节点。
- 节点.childNodes 。子节点们。
- 节点.firstchild 。第一个子节点。
- 节点.lastchild 。最后一个子节点。
- 节点.nextSibling 。后一个兄弟节点。
- 节点.previousSibling 。前一个兄弟节点。
- 遍历元素节点树:
兼容性是除了children属性,其他的属性对IE9及以下不兼容。- 节点.parentElement 。父元素节点。
- 节点.children 。 元素子节点。(常用)
- 节点.firstElementchild 。第一个元素子节点。
- 节点.lastElementchild 。最后一个元素子节点。
- 节点.nextElementSibling 。后一个兄弟元素节点。
- 节点.previousElementSibling 。前一个兄弟元素节点。
- DOM选择元素方法:
- 节点。
- 节点的类型:(括号里的数字是 nodeType方法 返回的值,可以用来区分是什么类型的节点)
- 元素节点 (1)。
- 属性节点 (2)。
- 文本节点 (3)。
- 注释节点 (8)。
- document节点 (9)。
- DocumentFragment文档碎片节点 (11)。
- 节点的属性
- nodeName 返回节点类型。
- nodeValue 返回这个文本节点或注释节点的内容。
- nodeType 返回节点类型对应的值。(常用)
- attributes 返回这个标签的属性节点的集合。
- 节点的类型:(括号里的数字是 nodeType方法 返回的值,可以用来区分是什么类型的节点)
- 节点的增删改:
- 创建节点:(这里的创建节点还在js手中拿着,后面可以通过appChild等插入方式放到html中)
- document.creatElement('标签名'); 。创建标签。(常用)
- document.creatTextNode('文本内容'); 。创建文本节点内容。
- document.creatComment('注释内容'); 。创建注释节点内容。
- document.creatDocumentFragment(); 。创建文本碎片节点。
- 插入节点:(和创建节点一起组合使用后给html增加节点)
- 父节点.appendChild(节点); 。把节点插入到父节点中。
- 父节点.insertBefore(节点1, 节点2); 。把节点1插入到父节点的节点2之前。
- 删除节点:
- 父节点.removeChild(子节点); 。剪切父节点的一个子节点。
- 节点.remove(); 。删除节点。
- 创建节点:(这里的创建节点还在js手中拿着,后面可以通过appChild等插入方式放到html中)
- Element节点的属性和方法
- 属性:
- innerHTML 。该属性可读写。可以改变标签的HTML内容。(常用)
- innerText/textContent 。可读写。可以改变标签的文本内容。
兼容性:innerText很老的火狐不兼容,textContent IE9及以下不兼容。 - className。属性可读写。可以改变class属性值。
- 方法:(结合事件形成动态效果,如鼠标移到某个元素上给它添上或修改属性对,让它符合别的css样式,鼠标离开恢复。)
- 元素.setAttribute('属性名', '属性值'); 。给元素增加属性对。
- 元素.getAttribute('属性名', '新属性值'); 。修改元素的属性值。
- 属性:
- 定时器(函数中如果有this,它指向window)
- setInterval(function, time);
- 意思就是每隔 time毫秒 执行一次前面的 function ,且是一直无休止的执行。
- 这个方法的第一个参数可以写字符串,表示每隔 time 毫秒执行一次前面的字符串转换为代码。(绝大部分情况都不要用这个写法)
- 这个方法要注意它的时间间隔是不会变的。
- setInterval的时间其实是不准的。
记住这个结果:所以setInterval()方法作为计时器,是非常不准的。 - setInterval是有返回值的。
它会返回一个数字作为它的唯一标识。(第几个定时器返回值就是几) -
这个唯一标识就是为了后面的程序能用clearInterval清除这个计时器。
它和setTimeout返回的标识是依次排列的。
- setTimeout(function, time)
意思是隔了 time 毫秒之后,执行 function ,且只执行一次。
它和setInterval返回的标识是依次排列的。 - clearInterval()
这个方法可以让setInterval停止。
一般都是传var的那个计时器变量名,不过也可以传具体的数字。(传数字几就是停止第几个计时器) - clearTimeout()
可以清除setTimeout。(让它停止) - 上述方法都是全局对象window上的方法,所以内部函数this指向的是window 。
- setInterval(function, time);
- DOM实例:
- 创建新的HTML元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
- 创建新的HTML元素:
DOM操作笔记
最新推荐文章于 2024-02-29 13:41:20 发布