JS入门到精通详解（7）

最新推荐文章于 2024-07-28 20:27:10 发布

zxpmoxo

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量639

点赞数

分类专栏： JS 文章标签： javascript 前端 css 开发语言 html Powered by 金山文档

本文链接：https://blog.csdn.net/zxpmoxi/article/details/128655495

版权

JS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

操作元素样式

ele.style

访问或设置行内样式

window.getComputedStyle()

//获取非行内样式 
//标准浏览器
// alert(getComputedStyle(o_div,1).width);
//IE浏览器
// alert(o_div.currentStyle.width);
//兼容             对象 属性
function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
	// return window（因为预解析里面没有这个玩意，需要声明一下）.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr];
}

操作元素类名

ele.className

ele.classList

ele.classList : 获取元素的全部类名

ele.classList.lentgh: 获取到元素类名的数量

ele.classList.add(): 向元素添加一个或多个类名

ele.classList.remove() : 可以删除元素的一个或多个类名

ele.classList.item(index) : 可以获取到元素类名索引为index的类名

ele.classList.toggle() : 可以为元素切换类名（判断如果存在，就删除，如果不存在，就加入）

ele.classList.contains(x) : 查看元素是否存在类名为"x"的类

操作元素属性

原生属性操作

元素.属性
元素['属性']
元素.getAttribute('属性名')
元素.setAttribute('属性名','属性值')
元素.removeAttribute('属性名')

自定义属性操作

getAttribute

setAttribute（key，value）

removeAttribute（key）

元素.getAttribute('属性名') : 获取属性
元素.setAttribute('属性名','属性值') ：设置属性
元素.removeAttribute('属性名') ：删除属性

H5自定义属性的操作 ( data-* )

ele.dataset : 读写自定义属性

<body>
    <div id="box" data-my-id="me"></div>
	<script>
        var o_div = document.getElementById('box');
		console.log(o_div.dataset.myId); //'me'
	</script>
</body>

操作元素内容

innerHTML : 设置或获取当前节点内容的内容（超文本）（标签）（可以解析超文本的含义）

innerText : 设置或获取当前节点内部的内容（纯文本）（不能解析超文本）

value : 设置或获取表单中的内容

DOM 操作复习

获取元素尺寸

offsetWidth / offsetHeight(只能获取不能设置)

节点对象.offsetWidth : 获取当前节点对象的相对宽度（width + border + padding)

节点对象.offsetHeight : 获取当前节点对象的相对高度（height + border + padding)

clientWidth / clientHeight

节点对象.clientWidth : 获取当前节点对象的可视区宽度（width + padding)

节点对象.clientHeight : 获取当前节点对象的可视区高度（height + padding)

获取元素偏移量

offsetLeft / offsetTop

offsetLeft : 相对左边的距离

如果父元素没有定位，则当前元素相对于页面左边（body）的left值

如果父元素有定位，则当前元素相对于父元素左边的left值。

offsetTop : 相对上边的距离

如果父元素没有定位，则当前元素相对于页面上边（body）的top值

如果父元素有定位，则当前元素相对于父元素上边的top值。

clientLeft / clientTop

clientLeft : 表示一个元素的左边框的宽度，以像素表示。

clientTop : 表示一个元素的上边框的宽度，以像素表示。

本地模拟瀑布流案例

DOM节点及以节点操作

DOM节点

DOM 的节点我们一般分为常用的三大类元素节点 / 文本节点 / 属性节点

什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）

比如我们标签里面写的文字，那么就是文本节点

写在每一个标签上的属性，就是属性节点

获取节点（高级选取）

firstChild : 第一个子节点

firstElementChild : 第一个元素子节点

lastChild : 最后一个子节点

lastElementChild : 最后一个元素子节点

previousSibling : 前一个兄弟节点

previousElementSibling : 前一个元素兄弟节点

nextSibling : 下一个兄弟节点

nextElementSibling : 下一个元素兄弟节点

parentNode : 父节点

childNodes : 获取到所有的元素子节点与文本子节点

//删除空白文本子节点
function noSpaceNode(node) {
	//获取所有子节点
	var childs = node.childNodes;
	//遍历所有的子节点
	for (var i = 0; i < childs.length; i++) {
		//文本							空白
		if (childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)) {
			//删除空白节点
			node.removeChild(childs[i]);
		}
	}
	return node;
}