文档的修改

文档的修改

插入方法

标签和文本的插入：使用before、prepend、append、after方法

HTML代码的插入：insertAdjacentHTML(where,html)

where的值可以是“beforeend”,”beforebegin”、“afetrend”、“afterbegin”

节点的移除

node.remove();

克隆节点elem.cloneNode(true)

举例：div2 = div.cloneNode(true)，参数true表明会克隆div的所有特性和子元素，false则表明不克隆子元素

DocumentFragment

DocumentFragment 是一个特殊的 DOM 节点，用作来传递节点列表的包装器（wrapper）。

我们可以向其附加其他节点，但是当我们将其插入某个位置时，则会插入其内容。

例如，下面这段代码中的 getListContent 会生成带有 列表项的片段，然后将其插入到 中：

<ul id="ul"></ul>

<script>
function getListContent() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(getListContent()); // (*)
</script>

parentElem.apendChild(node)

在父元素parentElment的最后插入一个位置插入node子元素。

小例子

动态创建列表

let ul = document.createElement('ul');
document.body.append(ul);
while(true){
 let value =prompt("请输入内容", '');
 if(!value){
  break;
}
ul.insertAdjacentHTML('afterbegin',`<li>${value}</li>`);
}

从对象创建树

元素的大小和滚动

检查一个元素是否被隐藏

function isHidden(elem){
return !elem.offsetWidth && elem.offsetHeight
}

getComputeStyle(elem).width和elem.clientWidth之间有什么不同点

1、elem.clientWidth的值是数值，而getComputedStyle(elem).width是返回一个以px结尾的字符串。

2、getComputeStyle可能会返回非数值的width,例如内联元素的“auto”;

3、clientWidth是元素的内部区域加上padding的距离，而getComputeStyle(elem).width是内部区域（具有标准的box-sizing），不包含padding;

4、getComputeStyle(elem)计算得到的宽度有的浏览器包含进度条，有的浏览器不包含进度条，clientWidth始终不包含滚动条的宽度。

window.innnerWidth和document.documentElement.clientWidth的区别

前者包含整个页面的宽度，后者不包括进度条。

ScrollTo、ScrollBy的区别

ScrollT（pagex, pagey）,j滚动到相对于整个文档的位置

ScrollBy(x,y),以当前所在的位置为参考点，移动到(x,y）位置

scrolltoView(true/false)

elem.scrolltoView(true),true是默认值，会将当前的元素定位到窗口的顶部，反之为false则定位到底部。

禁止滚动

document.body.style.overflow= “hidden”; 禁止滚动

document.body.style.overflow = ‘’; 解除禁止滚动

elementFromPoint(x,y)

document.elementFromPoint（x,y）会返回在窗口坐标（x,y）出嵌套最多的元素

let centerX = document.documentElement.clientWdith/2;
let centerY = document.documentElement.clientheight/2;
let elem =document.elementFromPiont(centerX, centerY);
elem.style.background = "red";
alert(elem.tagName);

上面的代码会高亮显示并输出位于窗口中间的标签。

getBoundingClientRect()

该方法没有参数，可返回以下值，通过获取的值可以计算元素的坐标

计算div的坐标

let x= div.getBoundingClientRect().left + document.documentElementScrollLeft;
let y = div.getBoundingClientRect().top + document.documentElementScrollHeight;

注意：documentElementScrollLfet/height是IE8之前的
IE9及之后使用window.pageXOffset和window.pageYOffset

计算任意一点的坐标

document.onclick = function(this){
coords.innerHTML = this.clientX +":" + this.clientY;
}
点击屏幕上的某一点，可显示出当前坐标，前提是没有滚动体条。