原⽣js操作dom的笔记整理
javascript分为3部分
ECMAScript 基础语法
DOM d – document o object m –model ⽂档对象模型
BOM
DOM
DOM 给我们提供了⼀些⽅法，让我们可以使⽤js来控制页⾯中的标签等。
页⾯元素 – 页⾯中的标签
常⽤的dom⽅法
注意：
由于获取结果可能是多个，element后⾯要加s
根据标签获取的结果是伪数组形式，伪数组是不具备数组的⽅法。
要操作伪数组中的所有元素需要遍历伪数组。
根据标签名获取元素时，有可能获取到的标签只有⼀个，但是形式还是伪数组。
根据标签名获取时，document可以更换为任意标签
在box中获取li标签。
注意：根据id获取的时候，前⾯只能写document
- ElementsByclassName(“box1”) 根据类名获取页⾯元素
- load()中的代码会在页⾯完全加载后执⾏。
设置标签的样式等⽅法
对标签的样式设置使⽤.style
var ElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"//带有段横线的属性要是⽤驼峰命名的⽅式。
设置标签的内容。
box.innerHtml=”哈哈”；
事件类型
- 点击事件 onclick
- ⿏标移⼊ onmouseover
- ⿏标移出 onmouseout
类名属性
访问标签的类名属性通过 标签.className
标签默认事件
某些标签具有默认的效果，例如a标签的跳转，有时候我们不想要这种效果，可以在事件最后加上return false;
循环添加事件
当我们进⾏循环添加事件的时候，在事件内部不能使⽤i，因为i的值已经是循环的结束条件那个值了（根据循环设置的具体情况⽽定）。
<script>
var ElementsByClassName("box");
for(var i=0;i<box.length;i++){
box[i].onclick=function() {
alert(this.innerHTML);
}
}
</script>
焦点事件
onfocus ⽂本框获取焦点时触发事件
onblur 失去焦点时触发事件
表单的常⽤属性：
input获取内部⽂本 使⽤value ipt.value
表单的属性
（不太常⽤）禁⽤表单 ipt.disabled 可以给表单禁⽤。设置值为true表⽰禁⽤，false表⽰启⽤
复选框选中 cb.checked 值为true表⽰选中 值为false表⽰没选中
下拉菜单选中 doudou.selected 值为true表⽰选中，为false表⽰没选中
全选反选的案例
⽅式⼀：使⽤flag（需要掌握）
⽅式⼆：不使⽤flag
样式相关
样式表有三种⽅式
内嵌样式（inline Style）：是写在Tag⾥⾯的，内嵌样式只对所有的Tag有效。
内部样式（internal Style Sheet）：是写在HTML的⾥⾯的，内部样式只对所在的⽹页有效。
外部样式表（External Style Sheet）：如果很多⽹页需要⽤到同样的样式(Styles)，将样式(Styles)写在⼀个以.css为后缀的CSS⽂件⾥，然后在每个需要⽤到这些样式(Styles)的⽹页⾥引⽤这个CSS⽂件。 最常⽤的是style属性，在JavaScript中，通过
通过标签.style.width 只能获取⾏内设置的样式属性，内嵌式和外链式都⽆法获取。
getComputedStyle(标签,false).width 可以获取计算后的样式(ie不⽀持)
console.log(getComputedStyle(box,null).height);
console.log(getComputedStyle(box,null)["height"]);
ie低版本不⽀持getComputedStyle
标签.currentStyle.height
console.log(box.currentStyle.height);
console.log(box.currentStyle["height"]);
封装⼀个兼容的获取样式的⽅法。
//tag是标签，attr是需要获取的属性。
function getStyle(tag,attr){
if(tag.currentStyle[attr]){//先判断有没有这个属性，没有是undefined，不会报错。
return tag.currentStyle[attr];
}else{
return getComputedStyle(tag,null)[attr];
}
同时设置标签的多个样式
box.style.cssText="width:10px;height:100px;background-color:red";//不常⽤
⽂本的设置：
box.innerHTML 可以获取和设置某个标签内的⽂本和内部标签
box.innerHTML="中午吃<span>我是sapn的内容</span>"
通过box.innerText可以获取不含内部标签的⽂本，ie⽀持
其他浏览器⽀持Content属性，作⽤与innerText相同
标签的获取⽅式
封装根据类名获取页⾯元素的函数(性能不⾼)
节点
dom – ⽂档对象模型 document是dom中的顶级对象
dom把html页⾯看作⼀个树结构
dom树中的每⼀个部分我们都称为节点。
节点访问关系
dom中提供了⼀套访问关系，称为节点访问关系
⽗⼦访问关系：
通过parentNode可以访问某个节点的⽗节点
通过childNodes可以得到某个节点的所有⼦节点，包含⽂本节点（空格和换⾏）
通过children可以得到某个节点中的所有元素⼦节点（不是标准⽅法，但是所有浏览器都⽀持，可放⼼使⽤）。 获取⼦节点
node.firstChild 表⽰第⼀个⼦节点（包含⽂本节点）
node.lastChild 最后⼀个⼦节点（包含⽂本节点）
获取元素⼦节点：ie低版本不⽀持
node.firstElementChild 第⼀个元素⼦节点原生js和js的区别
node.lastElementChild 最后⼀个元素⼦节点
兄弟访问关系：
不加element的都⽀持，加上的ie低版本
添加⼦节点
从后⾯添加：节点.appendChild(传⼊的节点); 添加的新节点其实是移动过来的。
从前⾯添加：节点.insertBefore(要插⼊的节点 , 在谁之前); 将节点插⼊到⼦节点中指定节点的前⾯。 注意：⼀定是⽗节点去调⽤⽅法，操作的都是⼦节点
创建节点的⽅式
节点.innerHTML
document.write(“
”)
第三种创建⽅式ateElement(“标签名”)
document不能更换
var ateElement("标签名")；
box.appendChild(newbox);
删除节点
⽗节点.removeChild(⼦节点)
调⽤的对象是⽗节点、
⽗⼦访问关系
访问⽗元素：节点.parentNode
访问⼦元素：
1、 全部⼦节点 childNodes 全部⼦节点 （包含⽂本节点）
2、 全部元素⼦节点 children 全部的元素⼦节点（标签）
总结：
访问某个⼦节点：
1、 第⼀个⼦节点 firstChild （有可能是⽂本节点）
2、 第⼀个元素⼦节点 firstElementChild ie低版本不⽀持
3、 最后⼀个⼦节点 lastChild （有可能是⽂本节点）
4、 最后⼀个元素⼦节点 lastElementChild ie低版本不⽀持

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。