14

1-列举所有获取 DOM 元素的方法（8种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

2-列举添加 DOM 元素的方法

document.createTextNode("Hello")//生成文本节点

document.createElement("div");//创建标签

insertBefore() 在某个元素之前插入元素 var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hello"); newDiv.insertBefore(newContent, newDiv.firstChild);

//在newContent 元素末尾添加元素

var newDiv = document.createElement("div");

`var newContent = document.createTextNode("Hello");`

newDiv.appendChild(newContent);

replaceChild()替换 replaceChild()接受两个参数：要插入的元素和要替换的元素 newDiv.replaceChild(newElement, oldElement);

removeChild() 删除元素 parentNode.removeChild(childNode);

3-列举移除 DOM 元素的方法

示例1：使用removeChild()方法

removeChild()方法可以从父节点删除子节点。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head> 
  
<body> 
    <ul style="border: 2px dashed #D58C00;"> 
        <li>Get Up in Morning</li> 
        <li>Do some exercise</li> 
        <li>Get Ready for school</li> 
        <li>Study Daily</li> 
        <li>Do homework</li> 
    </ul> 
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
        var e = document.querySelector("ul"); 
        var child = e.lastElementChild;  
        while (child) { 
            e.removeChild(child); 
            child = e.lastElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

效果图：

示例2：使用remove()方法

remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素；但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head> 
  
<body> 
    <ul style="border: 2px dashed #006DAF;"> 
        <li>Get Up in Morning</li> 
        <li>Do some exercise</li> 
        <li>Get Ready for school</li> 
        <li>Study Daily</li> 
        <li>Do homework</li> 
    </ul> 
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
        var e = document.querySelector("ul"); 
        var first = e.firstElementChild; 
        while (first) { 
            first.remove(); 
            first = e.firstElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

效果图：

示例3：使用 innerHTML =“”属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
</head> 
  
<body> 
    <ul style="border: 2px dashed #FE6368;"> 
        <li>Get Up in Morning</li> 
        <li>Do some exercise</li> 
        <li>Get Ready for school</li> 
        <li>Study Daily</li> 
        <li>Do homework</li> 
    </ul> 
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
        var e = document.querySelector("ul"); 
        e.innerHTML = ""; 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    }
</script> 
  
</html>

效果图：

本篇转自：https://www.html.cn/qa/javascript/10360.html

4- 分别列举 BOM 常用对象 location navigator history screen 中的属性和方法:

localhost对象:

reload 刷新页面

replace 用于新的文档替换当前文档

assign 加载新文档

href 设置或返回完整的 URL

host 设置或返回 # 号开始的 URL

hostname 设置或返回当前 URL 的主机名

port 设置或返回当前 URL 的端口号

pathname 设置或返回当前 URL 的路径部分

search 设置或返回从 ? 号开始的 URL 的部分

history对象:

History.back();回到上一个页面；
History.forward();前进到下一个页面
History.go(number)当number为负数时，向后跳转几个页面；为正数时，前进几个页面

navigator 对象:

Navigator.appversion:浏览器平台开始的版本信息

screen对象:

Screen.width:获取显示器的宽度
Screen.height:获取显示器的高度
Screen.availwidth:可用宽度;相当于body的宽度
Screen.availheight:可用高度；相当于body的高度

posted @ 2021-03-07 21:57 路~ 阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

14

var newContent = document.createTextNode("Hello");

公告

`var newContent = document.createTextNode("Hello");`