JavaScript的DOM属性

最新推荐文章于 2022-10-14 14:49:02 发布

maid_04

最新推荐文章于 2022-10-14 14:49:02 发布

阅读量327

点赞数

分类专栏：前端学习文章标签： dom 对象 javascript

本文链接：https://blog.csdn.net/maid_04/article/details/78750891

版权

前端学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

今天我想记录一下我对DOM属性的总结

首先，先来认识一下什么是JS的DOM

DOM 全称 Document Object Model ，中文名是文档对象模型

文档：我们的html页面

文档对象：页面中的元素

文档对象模型：为了能够让程序–js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素

接下来，就认识一下DOM的一些属性及一些对属性的操作

1. `childNodes` //只读属性子节点列表集合

不只元素节点是节点，一共有12种，当获取一个父元素的chlidNodes时要比元素数量多，经常接触到的除了元素节点外还有文本节点

2. `nodeType` //只读属性当前元素的节点类型 1为元素节点

用判断子节点的nodeType为1时，再去控制它

常用节点：1是元素节点，2是属性节点，3是文本节点

属性节点：就是元素的属性–元素.attributes //只读属性

3. `children` //只读属性子节点（元素节点）列表集合

children只会包含元素节点，因此不会有兼容性的问题

4. firstChild //只读属性第一个子节点

包含文本类型的节点，不兼容

火狐有效的写法firstElementChild

兼容写法var oFirst = 元素.firstElementChild||元素.firstChild;

if(oFirst){oFirst.style.....} //会在没有子节点时出问题

因此最好的做法是父元素.children[0].style....

5. lastChild //只读属性最后一个子节点

兼容写法：元素.lastElementChild||元素.lastChild

6. nextSibling //只读属性下一个兄弟节点

兼容写法： 元素.nextElementSibling||元素.nextSibling

7. previousSibling //只读属性上一个兄弟节点

兼容写法：元素.previousElementSibling ||元素.previousSibling

parentNode //只读属性父节点

没有兼容问题

8.offsetParent //只读属性父节点

距离当前元素最近一个有定位属性的父元素节点

没有默认是body（ie7及以下，如果当前元素没有定位是body，如果有定位则变成html）

9.offsetLeft/offsetTop //只读属性当前元素到定位父级的距离（偏移值）

如果有定位父级，如果自己没有定位，在ie7及以下该属性指的是到body的距离，其他是到定位父级的距离

如果没有定位父级（ie8及以下是到html的距离，而他们的默认margin值也不同，因此一定要清除默认样式，否则值不同）

10.offsetWidth/offsetHeight //只读属性当前元素的占位宽高

style.width的取值可以取到元素属性style里的宽度

clientWidth的值为style.width+padding

offsetWidth（占位宽）盒子宽度（无margin）

如果有定位的父元素，如果获取一个元素到页面的距离
    var iTop = 0;var obj = $('div3');
    while(obj){iTop +=obj.offsetTop;
    obj=obj.offsetParent;}
注意：body的offsetparent为空

11. DOM元素的动态创建

1) var oLi = document.createElement('li'); //创建元素

2) oLi.innerHTML = oText.value; //给元素html内容

3) 父级.appendChild(oLi) //在父级最后节点后添加元素

4) 父级.insertBefore(oLi,b) //在父级b节点前添加元素

5) 父级.insertBefore(oLi,oUl.children[0]) //给父级第一个节点前添加元素（在ie下如果没有子元素会报错）

解决方法:

oUl.children[0] ? oUl.insertBefore(oLi,oUl.children[0]) : oUl.appendChild(oLi)

appendChild,insertBefore,replaceChild都可以操作动态创建的元素，也可以操作已有的节点，而且是剪切操作

12. DOM的`removeChild`操作

父级.removeChild(li)//删除元素

父级.replaceChild(新节点,被替换节点)//替换子节点

13. 操作元素属性的方法

获取元素属性值 getAttribute() //()里为属性名

设置元素属性值 setAttribute() //()里为属性名和值

删除元素属性值 removeAttribute() //()里为属性名

Attribute 的特性

1、自定义属性，在ie8及以下可以用.和[]的方法取到，但是在标准浏览器下无法取到，用getAttribute()可以在所有浏览器中取到自定义属性

2、用.src和[‘src’]的方法取到的是绝对路径，用getAttribute()可以获取到相对路径（既实际值，ie7及以下不兼容，仍然是绝对路径）

创建元素的实例

<body>
<ul>
    <li></li>
</ul>
<script>
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.createElement("li");
oLi.innerHTML = "231";
oLi.onclick  = function(){
    this.style.backgroundColor = "red";
};
oUl.children[0] ? oUl.insertBefore(oLi,oUl.children[0]) : oUl.appendChild(oLi);
</script>
</body>

小练习：动态生成和删除对话

<body>
<input type="text"/>
<input type="button" value="发送"/>
<ul id="ul1">

</ul>
<script>
var oUl = document.getElementById("ul1");
var aInput = document.getElementsByTagName("input");
aInput[1].onclick = function (){
    var oLi = document.createElement("li");
    var oBtn = document.createElement("input");
    oBtn.type = "button";
    oBtn.value = "删除";
    oBtn.onclick = function (){
        oUl.removeChild(this.parentNode);
    };
    oLi.innerHTML = aInput[0].value;
    oLi.appendChild(oBtn);
    oUl.appendChild(oLi);
}
</script>
</body>

//点击发送生成一个li，然后点击删除就删除这个li
这里写图片描述

maid_04

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM属性

今天我想记录一下我对DOM属性的总结首先，先来认识一下什么是JS的DOM DOM 全称 Document Object Model ，中文名是文档对象模型文档：我们的html页面文档对象：页面中的元素文档对象模型：为了能够让程序–js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素接下来，就认识一下DOM的一些属性及一些对属
复制链接

扫一扫