|
导读网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立... 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 本篇文章给大家带来的内容是关于JS中Dom的相关知识总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。主旨 用来记录和总结学的知识点，以便温故知新 说明 这么写方便自己记忆 记忆点 节点相关 Dom节点获取 getElement (Id,ClassName,TagName)和querySelector (/All这个是静态的节点集合，不是实时的) 节点树
重点是: HTMLBodyElement这些都是构造函数，原型链的终端还是Object.prototype document.body.__proto__ === HTMLBodyElement.prototype //true document.documentElement.__proto__.__proto__ === HTMLBodyElement.prototype.__proto__ //true document.documentElement.__proto__.__proto__===HTMLElement.prototype //true nodeType
innerHTML，outerHTML，textContent 注意点： 对于文本内容例如：<>，innerHTML会进行转译><,而textContent则不会原样输出 当script片段放入innerHTML中时不会执行，但是对于包含事件类型的脚本就存在注入风险 "<script>alert('I am John in an annoying alert!')</script>"; //无风险
"<img src='#' onerror='alert(1)'>"; //有风险所以对于纯文本建议使用textContent outerHTML可以用来replace替换当前及自身的内容 nodeValue只有文本和注释节点才有值，否则输出null 属性相关attributes hasAttribute/get/set/remove ==>检测是否存在属性/得到/设置/删除 elem.proName与elem.getAttribute(proName)基本一致，有个别不一致，例如 let input = document.querySelector("input");
input.setAttribute("value", 3); //行间样式显示3
input.value = 666; //页面内容显示666
console.log(input.getAttribute("value")); //3自定义属性 通过data-log-n = 1可以通过elem.dataset.logN获取属性 元素创建以及增删改查元素节点创建let div = document.createElement('div');文本节点创建let textNode = document.createTextNode('Here I am'); 简单补充一个表格的创建 let table = document.createElement("table"); //创建一个table元素节点
let tbody = document.createElement("tbody"); //创建一个tbody元素节点
tbody.insertRow(0); //创建一行
tbody.rows[0].insertCell(0); //创建一行第一列
tbody.rows[0].cells[0].append(document.createTextNode("(0,0)")); //补充其内容
tbody.rows[0].insertCell(1); //创建一行第二列
tbody.rows[0].cells[1].append(document.createTextNode("(0,1)"));
table.append(tbody);
div.append(table);元素增删改查 class相关className将class的value以字符串形式返回 classList将class的value以类数组对象返回，提供了4种方法方便对class进行增删改查 elem.classList.add/remove("class")：增加和删除类 style相关通过style获取属性值必须是在行间样式中有填写的，否则空；elem.style.borderLeftWidth="100px"通过破折号"-"变成大写可以获取属性，必须带有px 重置样式：elem.style.borderLeftWidth=""；利用空字符串浏览器会应用CSS类及其内置样式 完全重写样式：div.style.cssText="color: red !important;"或者div.setAttribute('style', 'color: red...') 一种有css关联的样式，而不局限与行间样式：getComputedStyle(element[, pseudo]) <style>
.box {
width: 100px;
}
.a {
font-size: 1em;
}
.a:after {
content: "666";
display: inline-block;
width: 10px;
height: 10px;
}
</style>
<body>
<div class="box">
<div class="a" style="color: red;">213</div>
</div>
<script>
let div = document.querySelector(".a");
//let style = getComputedStyle(div,"after"); 读取伪类元素
//console.log(style.content);
let style = getComputedStyle(div);
console.log(style.left); //auto
console.log(style.fontSize); //16px
</script>
</body>返回结果与css样式关联，返回结果是经过计算的，例如16px，并且结果不一定是我们想要的例如auto 元素大小属性
记住这张图基本搞定： 大多数几何属性是只读的，但scrollLeft/scrollTop可以更改，浏览器将滚动元素。 scrollLeft/scrollTop - 元素的滚动部分的宽度/高度
顺便提提如何是浏览器滚动条滚动：scrollTo(x,y)让滚动条到水平x，垂直y的位置；scrollBy(x,y)让滚动条每次以水平x，垂直y的距离滚动； 整个文档的宽度/高度，带有滚动的部分 let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); 窗口大小 两种办法： 坐标相关获取元素相对窗口的坐标 function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}以上就是JS中Dom的相关知识总结的详细内容，更多请关注php中文网其它相关文章！ 网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(peng896066052@126.com),我们会及时处理.
Copyright © 2018-2020 雨林木风下载站
