Web第四课(DOM)

最新推荐文章于 2023-07-20 13:01:41 发布

姚文洲

最新推荐文章于 2023-07-20 13:01:41 发布

阅读量162

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42123832/article/details/107627761

版权

1. DOM简介

DOM document object model(文档对象模型)
在网页中一切皆对象，javascript可以获取这些对象并且操作它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM基础</title>
</head>
<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        /*
            浏览器已经为我们提供了整个文档节点对象，这个对象就是window属性
                可以在页面中直接使用，文档节点代表的是整个网页。
        */
        // console.log(document);
        // 获取到button对象
        var btn = document.getElementById("btn");
        // 修改按钮的文字
        btn.innerHTML = 'I\'m a button';
    </script>
</body>
</html>

2. 事件简介

文档或浏览器窗口中发生的一些特定交互的瞬间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>事件</title>
</head>
<body>
    <button id='btn'>我是一个按钮</button>
    <script type="text/javascript">
        // 可以为对象对应的事件绑定处理函数来处理相应事件
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert('你竟然敢点我？！！！');
        };
    </script>
</body>
</html>

3. 让javascript在整个页面加载完成之后再执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>让javascript的代码在整个文档加载完成之后再执行</title>
    <script type="text/javascript">
        // var btn = document.getElementById('btn');
        // btn.onclick = function () {
        //     alert('你竟然真的敢点我？');
        // };
        /*
         *  window对象的 onload 事件会在整个页面加载完成之后触发
         */
        window.onload = function () {
            // alert('整个页面已经加载完成');
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                alert('你竟然真的敢点我？');
            };
        };
    </script>
</head>

<body>
    <button id="btn">你点我试试？</button>
</body>

</html>

4. DOM查询

Document.getElementById()
Document.getElementsByName();
Document.getElementsByTagName();
Document.getElementsByClassName();
Document.getElementsByTagNameNS();
Document.querySelector();
Document.querySelectorAll();

5. innerHTML和innerText

innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义。
innerText 可以用于获取元素内部的文本内容，但是会自动将html标签去除。

6. 读取元素属性

如果需要读取一个元素的属性，直接使用 元素.attrname 即可。
这个操作可以对 id、name、value 等有效，唯独不能对 class 使用，如果要读取 class 属性，需要使用 元素.className。

7. 获取元素节点的子节点

// 通过具体的元素节点调用 getElementsByTagName()
// 可以返回当前节点的指定标签名后代节点
getElementsByTagName();
// 下面的都是属性
childNodes	//表示当前节点的所有子节点，包括了文本节点(DOM标签见得空白也会被当作文本节点)
firstChild	//表示当前节点的第一个子节点
lastChild	//表示当前节点的最后一个子节点
children	//表示当前元素的所有子元素(推荐使用)
firstElementChild	// 表示当前元素的第一个子元素(IE8及以下浏览器不支持)

8. 获取父节点和兄弟节点

parentNode	// 表示当前节点的父节点
previousSibling	// 表示当前节点的前个兄弟节点
nextSibling		// 表示当前节点的后一个兄弟节点
previousElementSibling	// 表示当前节点的前一个兄弟元素(IE8及以下浏览器不支持)
nextElementSibling		// 当前节点的后一个兄弟元素(IE8及以下浏览器不支持)

9. 文本节点的nodeValue就是文本的内容

10. 其它元素查询

document.body 保存的就是body的引用
document.documentElement 保存的是html的引用
document.all 表示所有的元素

11. javascript 操作DOM的实质是修改文本

因此可以使用修改DOM的 innerHTML 的方式来做到增删操作。

12. 元素的增删改

appendChild();
removeChild();
replaceChild();
insertBefore();
createAttribute();
createElement();
createTextNode();
getAttribute();
setAttribute();

13. 使用DOM来操作CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>DOM操作CSS</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*
                点击按钮以后，修改box1的大小
            */
            var box1 = document.getElementById('box1');
            var btn1 = document.getElementById('btn01');
            btn1.onclick = function () {
                /*
                    通过js修改元素的样式：
                    语法：元素.style.样式名 = 样式值
                    如果css样式名中含有“-”，这种名称在js中是不合法的
                    需要将这种样式修改为驼峰命名法，去掉“-”，然后将“-”之后的字母大写

                    通过style属性设置的样式都是内联样式，具有较高优先级所以往往会立即刷新
                        但是如果在样式中写了“!important”，将无法通过js修改样式，因此尽量不要为样式设置“important”
                */
                box1.style.width = '300px';
                box1.style.backgroundColor = 'chocolate';
            };
        };
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>

    <br>

    <div id="box1"></div>
    
</body>

</html>

14. 读取元素当前的样式

样式的读取很简单 var xxx = eleName.style.styleName
但是请注意，通过这种方式只能读取内联样式，不能读取通过样式表设置的样式。
如果要读取元素当前显示的样式：var xxx = eleName.currentStyle.styleName，如果元素没有设置过某个样式，则获取到其默认值(仅IE浏览器支持)。
其它浏览器中可以使用 getComputeStyle() 这个方法来获取元素当前的样式。(IE8及以下不支持)

// 下面的方法可以在其它浏览器中使用，这是window的方法，可以直接使用，并且会返回一个样式对象
// 参数1：要获取样式的元素
// 参数2：可以传递一个伪元素，一般都传null
var obj = getComputedStyle(box1, null);
// 可以通过obj.styleName来读取样式，如果没有设置该样式，则读取到的是具体的实际值。
alert(obj.height);

15. 兼容性问题

如果要兼容，则可以自定义一个方法，然后在方法中先判断当前的window具备哪种方法，然后使用该方法即可

var obj;
if (window.getComputedStyle){
	obj = getComputedStyle(box1, null);
} else {
	obj = box1.currentStyle;
}
alert(obj.height);

16. 其它样式的相关属性

下面这些属性都是只读的：
	clientWidth
	clientHeight
		- 这两个属性可以获取元素的可见宽度和高度
		- 这些属性都是不带px的，可以直接用于计算，
		- 会获取元素的宽度和高度，包括内容区和内边距
	offsetWidth
	offsetHeight
		- 这两个属性包括了内容区，内边距和边框
	offsetParent
		- 可以用来获取当前元素的定位父元素
		- 会获取到当前元素的最近的开启了定位的祖先元素
		- 如果所有的祖先元素都没有开启定位，则返回body
	offsetLeft
	offsetTop
		- 获取当前元素相对于其定位父元素的水平偏移量和垂直偏移量
	scrollWidth
	scrollHeight
		- 获取整个滚动区域的宽度和高度
	scrollLeft
	scrollTop
		- 获取水平滚动条和垂直滚动条滚动的距离
	scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚到底了
	scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚到底了