web学习笔记（二十三）
时间：2024-03-31 07:55:45 来源：网络cs 作者：胡椒 栏目：卖家故事 阅读：
目录
1.增加节点
1.1document.write
1.2innerHTML
1.3动态添加
1.4追加和插入节点
2.删除、克隆、替换节点
2.1删除节点
2.2克隆节点
2.3替换节点
3.事件
3.1什么是事件
3.2事件三要素
3.3事件的种类
3.4常见事件名称（类型）汇总
4.操作元素的属性
4.1修改和获取属性三种方法汇总
4.2常用DOM属性汇总
4.3改变元素内容
4.4表单元素的属性操作
4.5样式属性操作
1.增加节点
1.1document.write
document.write(' 标签名 ');
document.write('<h3></h3>');1.2innerHTML
节点.innerHTML=' 标签名 ';
这种方式有覆盖性， 不推荐单独使用。
1.3动态添加
var 标记= document.createElement('标签名')；
添加完节点后需要将节点放到指定位置才能被我们正常使用。因此通常将添加语句和追加语句结合使用。
var b_tr = document.createElement('tr'); // 添加tr tbody.appendChild(b_tr); // 在tbody里面追加tr1.4追加和插入节点
（1）追加节点 ： 父节点.appendChild(子节点)（向子节点列表的末尾添加新的子节点）
（2）插入节点 父节点.insertBefore(新节点，旧节点)；（会将新节点添加在旧节点后面）
2.删除、克隆、替换节点
2.1删除节点
父节点.removeChild(子节点)
2.2克隆节点
var cnode=node.cloneNode(true);
括号里面可以写true或者false,默认是false,true可以把内容一块克隆了，false只能克隆标签。
2.3替换节点
父节点.replaceChild(新节点，已存在的节点)
3.事件
3.1什么是事件
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为（就是触发响应机制）。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
3.2事件三要素
事件源（触发事件的元素）。事件名称（类型）事件的处理程序（就是一个函数，函数内部写入这个事件要做什么）。3.3事件的种类
（1）传统事件（简单但不利于团队合作,和html没有完全分离，多次添加重复事件会覆盖）
<button onclick="text1()"></button>（2）脚本模型----现代事件 （利于团队合作，on+事件名称）
格式：btn.οnclick=function(){}或者
btn.οnclick=show;(此处函数名后不加括号)
function show(){
}
<button id="btn">脚本模型点击</button> <script> function text1() { console.log('单击事件已被执行'); // 此处不建议用document.write('')输出，页面会重绘，就不显示按钮的存在了 } var btn=document.querySelector('#btn'); btn.onclick=function(){} // 或者 btn.onclick=text1;//注意函数名后不能加括号 // 此方法不足的地方，同样的注册事件只能添加一次，多次添加会覆盖 </script>（3）新事件 w3c事件（加同样注册事件可以注册多个监听器，然后按照多个注册顺序依次执行）
| 兼容性 | 注册（绑定、添加）事件 | 解绑（删除）事件 |
| ie9+ | btn.addEventListenter('click',function(){},false) 或者 btn.addEventListenter('click',函数名,false) false可以省略，表示冒泡机制
| btn.removeEventListenter('click',函数名); |
| ie8 | btn.attachEvent('onclick',function(){}) | btn.detachEvent('onclick',function(){}); |
| 兼容所有版本 | btn.οnclick=function(){} | btn.οnclick=null; |
3.4常见事件名称（类型）汇总
| 鼠标事件 | 触发条件 |
| onclick | 单击 |
| onmouseover | 鼠标经过（有冒泡机制） |
| onmouseout | 鼠标离开（有冒泡机制） |
| onmouseenter | 鼠标进入 |
| onmouseleave | 鼠标离开 |
| onmousedown | 鼠标按下 |
| onmousemove | 移动鼠标 |
| onmouseup | 释放鼠标 |
| onfocus | 获取焦点 |
| onblur | 失去焦点 |
4.操作元素的属性
4.1修改和获取属性三种方法汇总
（1）方法一：
修改：节点对象.属性名=属性值;
获取： var 变量= 节点对象.属性名;
（2）方法二：
修改：节点对象[属性名]=属性值；
获取： var 变量=节点对象[属性名];
（3）方法三：自定义属性
节点对象.setAttribute(属性名，属性值)
var 变量= 节点对象.getAttribute(属性名)
4.2常用DOM属性汇总
| HTML标记的属性 | DOM元素属性 |
| src、alt、id、style... | src、alt、id、style... |
| class | className |
| for | htmlFor |
4.3改变元素内容
（1）改变内容(文字)
node.innerText='值'
.innerText这个方法没有解析标记的能力，对原来的内容有覆盖性，但它去除html标签,同时去掉空格和换行。
(2)改变内容和标签
node. innerHTML='值'
innerHTML 对原来的内容有覆盖性，会将标签内所有内容都打印出来，包括html标签，同时保留空格和换行。
4.4表单元素的属性操作
（1）通过value值来操作
type='text/password/file/submit/reset' 和多行文本框textarea还有选择框select可以通过取出value的值来进行操作。如果有value就取value中的值，当 value='' " 取出为空，如果没有就取出输入框中的值。
(2)通过checked值来操作
单选钮和复选框可以通过checked来操作。eg: radio.checked=true; 此时，选中时true,未选中是false.
(3)通过disabled(按钮是否禁用)值来操作
按钮可以设置disabled值来完成一些操作。此时， true是按钮不可用 false 是按钮可用。
4.5样式属性操作
我们可以通过.style和.className这两种方式来修改元素大小、颜色等样式。其中element. style是 行内样式操作。element. className 是类名样式操作，可以用来修改元素的类名。
（1）设置或修改样式（只有一种方法）
dom节点.style.样式名=样式值；（此时设置的样式都是行内样式，优先级比较高）注意：在js里面修改的样式采用驼峰命名法
element.style.textAlign=center（2）获取样式（两种方法）
方法一(只能获取行内样式)：var stylev=dom节点.style.样式名;
方法二（行内和外部都可以渠道，只读属性）： window.getComputedStyle(dom节点对象，null).样式名 （ window.getComputedStyle(dom节点对象，伪类).样式名可以取到伪类的样式）
<body> <div id="box"> </div> <script> var box = document.querySelector('#box'); box.style.width='200px'; box.style.height="200px"; box.style.backgroundColor='#333'; box.style.margin='auto'; var w1=box.style.width; console.log(w1); var h1=window.getComputedStyle(box,null).height; console.log(h1); </script></body>本文链接：https://www.kjpai.cn/gushi/2024-03-31/151266.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
上一篇：Windows下双网卡配置静态路由，实现多网络同时使用
下一篇：返回列表