本文介绍: 3.offset相关属性（区分读与写的使用场景）1.普通属性（2读写方法+添加自定义属性）一.代码的执行顺序（同步与异步）2.style属性（读与写）同步代码与异步代码的问题？五.综合性案例：选项卡。三.js文本（2种）
2.案例
动态表格：
var oTable = document.createElement("table");
var count = 0;
oTable.border = "1px";
for(var i=0; i<3; i++){
var oTr = document.createElement("tr");
oTable.appendChild(oTr);
for(var j=0; j<3; j++){
var oTd = document.createElement("td");
oTr.appendChild(oTd);
oTd.innerHTML = ++count;
}
var oDelTd = document.createElement("td");
oTr.appendChild(oDelTd);
oDelTd.innerHTML = "删除";
oDelTd.onclick = function(){-----------注意事项:事件体的代码,在页面渲染的时候不执行,只有用户通过动作触发时执行
parentNode找父元素
oDelTd.parentNode.remove();-----------------所以该方法无法实现点一行的删除就删掉那一行表格的效果
代码异步的解决方案：
this:函数体的内置对象,与事件体连用，代表触发该事件的元素
this.parentNode.remove();
}
}
document.body.appendChild(oTable);
节点间的遍历:
父找子:（4个）此处要注意区分children与childNodes的区别
1.firstElementChild：返回节点的第一个子节点
2.lastElementChild：返回节点的最后一个子节点
3.childNodes：返回父节点的所有子节点,返回的文本节点和元素节点
案例：
var oUl = document.querySelector('ul');
var oLis = oUl.childNodes;
for(var i=0; i<oLis.length; i++){
if(oLis[i].nodeType == 3){
oLis[i].remove();
}
}
for(var i=0; i<oLis.length; i++){
console.log(oLis[i].innerHTML);
}
4.children：返回父节点的所有子节点,返回元素节点（存放在数组中，可通过下标索引使用）
var oUl = document.querySelector('ul');
var oLis = oUl.children;
for(var i=0; i<oLis.length; i++){
console.log(oLis[i].innerHTML);
}
子找父：（1个）
5.parentNode
兄弟：（2个）
6.nextElementSibling 下一个节点
7.previousElementSibling 上一个节点
js中使用的文本分为两大类：
1.表单元素的value
2.innerHTML：innerHTML作用，常用于字符串拼接页面
演示：
<div>我是<span>刘浩然</span>的女朋友石卓冉</div>
var oDiv = document.querySelector("div");
outerHTML:包含自身标签的所有内容
console.log(oDiv.outerHTML);
innerText:只打印文本内容，不包含标签
console.log(oDiv.innerText);
innerHTML:不包含自身标签的所有内容
console.log(oDiv.innerHTML);
四.节点的属性
1）点运算
读
var oBox = document.querySelector("#box");
console.log(oBox.id);
写
oBox.id = "hahaha";
2）getAttribute/setAttribute方法
var oBox = document.querySelector("#boxxxx");
读:
dom对象.getAttribute(属性名):属性值
console.log(oBox.getAttribute("id"));
写:
dom对象.setAttribute(属性名,属性值)
oBox.setAttribute("class","heiheihei");
3）添加自定义属性
var oBox = document.querySelector("#boxxxx");
oBox.aaaa = 99999;
console.log(oBox.aaaa);
2.style属性（读与写）
var oBox = document.querySelector("#boxxxx");
写:dom节点.style.属性名 = "属性值"
注意事项:属性值全都是字符串
oBox.style.width = 200+"px"; -------------> "200px"
oBox.style.height = 200+"px";
oBox.style.backgroundColor = "hotpink";
读: getComputedStyle(dom节点名,false)["属性名"]:返回属性值
console.log(oBox.style.fontSize);----------------------------------结果为""，所以这个方法不能读取
console.log(getComputedStyle(oBox,false)["fontSize"]);
offset相关属性
var oBox = document.querySelector("#boxxxx");
不合适的数值读取方式：
console.log(getComputedStyle(oBox,false)["width"]);----------带px的字符串,非数值，无法使用
读:offset读出来的都是数字
console.log(oBox.offsetWidth);
console.log(oBox.offsetHeight);
console.log(oBox.offsetLeft);
console.log(oBox.offsetTop);
写:和style的写一毛一样,单位是带px的字符串
oBox.style.left = "300px";
小老虎跳一跳案例：区分offset属性的读与写
需求：鼠标每点一下，老虎图片向上平移一定的高度（展现跳起来效果），然后两秒钟后平移回到原来的位置
style：
#tiger{
height: 100px;
width: 100px;
background-image: url(img/3.jpg);
background-size: 100px 100px;
position: absolute;
left:200px;
top:600px;
}
html：
<div id="tiger"></div>
script：
var oTiger = document.querySelector("#tiger");
document.onclick = function(){
oTiger.style.top = oTiger.offsetTop - 100 + "px";---------------------------该语句第一个offset属性oTiger.style.top属于“写”的属性，也即给对象oTiger的top赋上新属性，所以写法与style大体一致，直接使用style加点运算符然后打点写top，但是后面的第二个offset属性oTiger.offsetTop与第一个有所不同，这个属性需要提供自身原本的属性值与后面的100进行加减运算，从而得到新值赋给前面的第一个offset属性，故此处的第二个offset属性写法应该是获取属性，也即“读”的写法，所以此处写法是：对象.offsettop。
setTimeout(function(){
oTiger.style.top = "600px";
},2000);
}
五.综合性案例：选项卡
style：
*{
margin: 0;
padding: 0;
list-style: none;
}
#wrap{
width: 500px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
}
ul{
height: 100px;
display: flex;
justify-content: space-evenly;
text-align: center;
border: 1px solid red;
line-height: 100px;
}
li{
width: 24%;
border: 1px solid red;
}
#box{
height: 300px;
border: 1px solid red;
}
.newStyle{
color: yellow;
background-color: hotpink;
}
.oldStyle{
color: black;
background-color: white;
}
html：
<div id="wrap">
<ul>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>程序员装</li>
</ul>
<div id="box"></div>
</div>
script
var oLis = document.getElementsByTagName("li");
var oBox = document.querySelector("#box");
异步解决方案1：let代替var
let修饰的循环变量,可以避免i变量丢失
for(let i=0; i<oLis.length; i++){
oLis[i].onclick = function(){
for(let j=0; j<oLis.length; j++){
if(i == j){
/* oLis[j].style.color = "yellow";*/------------样式写法1
// oLis[j].style.backgroundColor = "hotpink";
//样式直接赋值 : className
oLis[j].className = "newStyle";------------样式写法2
}else{
// oLis[j].style.color = "";
// oLis[j].style.backgroundColor = "";
oLis[j].className = "oldStyle";
}
}
switch(i){
case 0:
oBox.style.backgroundColor = "red";
break;
case 1:
oBox.style.backgroundColor = "yellow";
break;
case 2:
oBox.style.backgroundColor = "blue";
break;
case 3:
oBox.style.backgroundColor = "green";
break;
}
}
}
异步解决方案2：给li组成的数组oLis的每一个循环元素oLis[i]增加新属性index，并将i赋值给它，然后再函数体中，用this.index读取当前节点属性，代替已经循环完毕的变量i，通过这种方法保证函数体中i的数值与每一轮对应的元素li对应。（由于i随着每一轮循环的自增，被赋值为每一轮循环的li的index属性值，所以每一行也即每一轮li的index属性值必然不同，可通过oLis数组下标索引不同的li然后读取index属性值来验证。）
for(var i=0; i<oLis.length; i++){
oLis[i].index = i;
oLis[i].onclick = function(){
for(var j=0; j<oLis.length; j++){
if(this.index == j){
// oLis[j].style.color = "yellow";
// oLis[j].style.backgroundColor = "hotpink";
//样式直接赋值 : className
oLis[j].className = "newStyle";
}else{
// oLis[j].style.color = "";
// oLis[j].style.backgroundColor = "";
oLis[j].className = "oldStyle";
}
}
switch(this.index){
case 0:
oBox.style.backgroundColor = "red";
break;
case 1:
oBox.style.backgroundColor = "yellow";
break;
case 2:
oBox.style.backgroundColor = "blue";
break;
case 3:
oBox.style.backgroundColor = "green";
break;
}
}
}
原文地址:https://blog.csdn.net/weixin_69145757/article/details/132906476
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_3064.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
