検索
JSのDomに関する関連知識のまとめOct 26, 2018 pm 04:26 PM
javascript

この記事の内容は、JS の Dom に関する関連知識をまとめたものです。必要な方は参考にしていただければ幸いです。

目的

過去を振り返り、新しいことを学ぶために、学習した知識ポイントを記録および要約するために使用されます

説明

わかりやすくするために、このように記述します。自分のメモリ

メモリクリック

ノード関連

Domノード取得

getElement(Id,ClassName,TagName)とquerySelector(/これはすべて静的ノード コレクション (リアルタイムではありません)
childNodes/firstChild/lastChild/nextSibling/previousSibling/parentNode は、要素ノードだけでなく、すべてのタイプの関連ノードを取得します
Children/firstElmentChild/lastElmentChild/nextElmentSibling/previousElmentSibling/parentElment、取得します要素関連のノードのみ

ノード ツリー

JSのDomに関する関連知識のまとめ

重要なポイントは次のとおりです。

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

##Node.ELEMENT_NODE1要素ノード、要素Node.TEXT_NODE3テキスト ノード、textContent##Node.PROCESSING_INSTRUCTION_NODEE#Node.COMMENT_NODE8コメント ノードNode.DOCUMENT_NODE9Document ノードNode.DOCUMENT_TYPE_NODE10ドキュメント タイプを説明する DocumentType ノード。たとえば、 ドキュメント タイプ宣言。 Node.DOCUMENT_FRAGMENT_NODE11A DocumentFragment ノード、コード フラグメント ノード

innerHTML,outerHTML,textContent
elem.innerHTML:指的是elem中所有的childNodes,包括注释节点可利用elem.innerHTML += "xxx"进行累计全覆盖
elem.outerHTML:指的是elem中所有的childNodes以及elem自身包括注释节点
elem.textContent:指的是elem的childNodes中所有的文本节点,不包括注释节点

注意点:

对于文本内容例如:,innerHTML会进行转译> innerHTML会对内容中的标签进行转译为html相应节点

当script片段放入innerHTML中时不会执行,但是对于包含事件类型的脚本就存在注入风险

"<script>alert(&#39;I am John in an annoying alert!&#39;)</script>"; //无风险
"<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/609/508/163/1540542304653784.png?x-oss-process=image/resize,p_40" class="lazy" alt="JSのDomに関する関連知識のまとめ" >";                          //有风险

所以对于纯文本建议使用textContent

outerHTML可以用来replace替换当前及自身的内容

nodeValue只有文本和注释节点才有值,否则输出null

属性相关

attributes
  元素属性的map集合,可通过for-of迭代遍历出name-value

hasAttribute/get/set/remove ==>检测是否存在属性/得到/设置/删除

elem.proName与elem.getAttribute(proName)基本一致,有个别不一致,例如input-value

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);

元素增删改查
 node.append()与node.prepend()都是在node内部添加,一个始终往队尾加一个往队首加
  node.before()与node.after(),一个加在node自身节点的上面,一个加在下面
 node.replace();自身节点替换成参数节点
  还有一个node.insertAdjacentHTML(where,html);where有4种值
 "beforebegin"与"afterbegin"在node开始位置的前或者后添加html
 "beforeend"与"afterend"在node结束位置的前或者后添加html
  elem.removeChild():删除子节点,还存在内存中通过变量可以读取
  node.remove():则彻底删除,不再内存中,不再能被读取

class相关

className将class的value以字符串形式返回

classList将class的value以类数组对象返回,提供了4种方法方便对class进行增删改查

elem.classList.add/remove("class"):增加和删除类
  elem.classList.toggle("class"): 如果类存在,则删除它,否则添加它
  elem.classList.contains("class"): 返回true/false,检查给定的类

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>


    <div>
        <div>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>

返回结果与css样式关联,返回结果是经过计算的,例如16px,并且结果不一定是我们想要的例如auto
它还能读取伪类元素的样式属性,将第二个参数填写after;getComputedStyle(element, "after")

元素大小属性

JSのDomに関する関連知識のまとめ

记住这张图基本搞定:
简单写写:offsetWidth:元素全尺寸=border+padding+content+滚动条宽度;clientWidth/Height:只考虑可见部分content+padding(不加滚动条);
顶部边框宽度:clientTop,左边边框宽度:clientLeft,但是当滚动条在左边时要加上其宽度=clientLeft
offsetParent来获取最近的CSS定位祖先。并offsetLeft/offsetTop提供相对于它左上角的x / y坐标。
属性scrollWidth/scrollHeight还包括滚出(隐藏)部分,例如没有水平滚动,scrollWidth等于clientWidth

大多数几何属性是只读的,但scrollLeft/scrollTop可以更改,浏览器将滚动元素。

scrollLeft/scrollTop - 元素的滚动部分的宽度/高度
  注意点:
  如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0。
  设置scrollTop的值小于0,scrollTop 被设为0
  如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

JSのDomに関する関連知識のまとめ

顺便提提如何是浏览器滚动条滚动:scrollTo(x,y)让滚动条到水平x,垂直y的位置;scrollBy(x,y)让滚动条每次以水平x,垂直y的距离滚动;
scrollIntoView():参数true默认值,滚到顶部,false滚到底部;document.body.style.overflow = "hidden"禁止滚动

整个文档的宽度/高度,带有滚动的部分

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

窗口大小

两种办法:document.documentElement.clientWidth/Height window.innerWidth/Height有细微区别当有滚动条时,前者不包括后者包括

坐标相关

获取元素相对窗口的坐标elem.getBoundingClientRect()返回的包换坐标的对象,左上顶点的(left,top)以及右下顶点的(right,bottom)
网页滚出窗口部分,有两种方式计算pageYOffset或者document.documentElement.scrollTop
因此我们可以计算元素相对与页面的位置

function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

Constant Value です。説明
7 A 処理命令XML ドキュメントの場合、 宣言など。

以上がJSのDomに関する関連知識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール