前端JS——补充内容

news2024/11/15 15:45:11

这期是番外篇，主要是补充一下，之前没有说完整的内容。

后面两期太仓促了，一些值得注意的细节没有提到

之前的内容可以点击：

JS总结上

JS总结中

JS总结下——DOM操作

JS总结下——事件操作

前面的两篇总结没什么好补充的，主要是说说后面两篇。

一个很重要的概念：

属性的值，可以是函数！！！

属性的值，可以是函数！！！

属性的值，可以是函数！！！

重要的事情，要说三遍！！！

例子：

1.<input type="button" οnclick="函数名/函数名()">

2.obj.onclick(可以是其他事件) = function() { 函数体 }

获取元素：

获取元素这里有几个遗漏的点，现在补充一下。

我们的获取方式：

document.获取方法()——这些获取元素节点的方法，全是document对象的方法。

这里面的document能不能换成其他DOM元素？

其实是部分支持的：

getElementById()是不支持的——document.getElementById()

getElementsByTagName()是支持的——document/DOM元素.getElementsByTagName()

querySelector()和querySelectorAll()：

之前提到过，这两个方法允许我们使用CSS选择器的语法，但是CSS选择器的语法是啥我没有举例子，现在补充一下：

document.querySelector("#main")

document.querySelectorAll("#list li")

document.querySelector("list li:nth-child(3)")

document.querySelectorAll("input:checked ")

这些都是很经典的例子，建议多看看~

动态创建DOM节点：

createElement：创建元素节点（HTML标签）——结果是一个没有任何属性的元素节点

createTextNode：创建文本节点（HTML中的文本内容）

有没有发现什么不对劲的？

好像没有创建属性节点？

创建属性节点其实很简单，就是使用对象属性的方式进行即可。

元素.attr = "值"

特别注意：

class属性是不能直接写：元素.class = "attr"；而是要写成：元素.className = "attr"

CSS属性控制：

下面补充一些，关于CSS属性控制的注意事项。
控制CSS的属性有两种方法：

obj.style.attr = "value" / obj.style["attr"] = "value"——使用驼峰命名，只能写单个样式

obj.style.cssText = "value"——不需要使用驼峰命名，直接写样式即可，允许多个样式

不管是哪种方法，其实都是修改属性——style的值，来动态改变样式。

而style作为属性，就意味着这是一个行内样式，在三种样式引入方法里，行内样式是优先级最高的。

关于获取为什么不能使用obj.style.attr？

这个方法有局限性。

因为这种方法，获取的是obj（即DOM对象，也就是HTML标签元素）的属性style里面的某一个CSS样式（attr）。

也就是说，这个方法只能获取行内样式的属性。

补充问题：

document.write和innerHTML之间的区别？

实话说，看到的时候，我愣了一秒钟。

经过我不是那么严谨的测试，可以发现以下不同：

1.操作对象不同。前者是document对象的方法；后者是任意一个DOM元素，document对象没有这个方法；

2.覆盖问题。前者不会覆盖原有内容；后者会覆盖DOM元素里面的内容；

3.语法不同。前者是document.write()；后者是DOM元素.innerHTML

测试代码如下：

<body>
    <div style="margin: 0 auto;text-align: center;">这是源生</div>

    <script>
        document.write("<div style='margin: 0 auto;text-align: center;'>这是一段话By document.write</div>")

        document.body.innerHTML = "<div style='margin: 0 auto;text-align: center;'>这是一段话By innerHTML</div>"
        
    </script>
</body>

感兴趣的小伙伴可以自己尝试一下！

运行结果：