Dom元素及其操作

Document Object model(文件对象模型)

document对象

html文档都会变成

document.head
document.body

readyState

返回当前文档状态

loading：加载HTML代码阶段，尚未完成解析
interactive：加载外部资源阶段
complete：全部加载完成

documnet.location

// 假定当前网址为http://user:[email protected]:4097/path/a.html?x=111#part1
document.location.href // “http://user:[email protected]:4097/path/- - a.html?x=111#part1”
document.location.protocol // “http:”
document.location.host // “www.example.com:4097”
document.location.hostname // “www.example.com”
document.location.port // “4097”
document.location.pathname // “/path/a.html”
document.location.search // “?x=111”
document.location.hash // “#part1”
document.location.user // “user”
document.location.password // “passed”

// 跳转到另一个网址

document.location.assign(‘http://www.google.com’)
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)
// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign(‘http://www.google.com’)
// 将location对象转为字符串，等价于document.location.href
document.location.toString()documnet.location.href 获取地址的缓存

doucument.write

document.write(‘hello’) 在页面上清空了并创建了一个新的文档流

如果页面已经渲染完成再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
如果在页面渲染过程中调用write方法，并不会调用open方法。

Element

除了documnet对象，在DOM中最常用的就是Element对象了，ELement对象表示HTML元素

查询元素

getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
getElementByclass()
getElementByclass()[0]
getElementByclass()[1]
getElementByName()

querySelector(’.box .child’)

与css保持一致的选择元素方法

选择只会选择一个元素

doucument.querySelectorAll(’#target’)

创建元素

createElement()

document.createElement(‘div’)

createTextNode()

createDocumentFragment()

DocumentFragment对象是一个存在于内存

var navbarNode = document.querySelector('.navbar')
var fragment = document.createDocumentFragment()
for(var i = 0; i<5; i++){
  var child = document.createElement('li')
  var text = document.createTextNode("helloworld")
  child.appendChild(text)
  fragment.append(child)
}
navbarNode.append(fragment)

插入元素

appendChild
replaceChild

删除元素

removechild

clone元素

node.cloneNode(true)

setAttribute设置属性

link.setAttribute(‘id’,login)

getAttribute

link.getAttribute(‘id’)
得到一个属性

removeAttribute

link.removeAttribute(‘id’)
删除一个属性

innerHtml outerHtml

1.ajax获取数据
2.字符串的拼接
3.把字符串放到页面上去

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="navbar"></ul>
<script>
var data = [1, 2, 3]
var html = ''
data.forEach(function(item){
  html += '<li>' + item + '</li>'
})
document.querySelector('.navbar').innerHTML = html

</script>
</body>
</html>

常见使用方法

修改样式

可修改元素的样式

原本’-'的时候变为驼峰的形式
document.querySelector().style.fontSize()的时候

获取样式

getComputedStyle(document.querySelector(’#hello’)).font-size

class 操作

var nodeBox = document.querySelector(’.box’)
console.log( nodeBox.classList )
nodeBox.classList.add(‘active’) //新增 class
nodeBox.classList.remove(‘active’) //删除 class
nodeBox.classList.toggle(‘active’) //新增/删除切换
node.classList.contains(‘active’) // 判断是否拥有 class

页面宽高的计算

element.clientHeight

imges

element.offsetHeight

imges

scrollHeight

有滚动条的时候里面内容真实的高度
还包括上面的margin的高度

scrollTop

页面已经滚动的值

window.innnerHeight

如何判断一个元素是否出现在视野里面呢

如何判断页面滚动到了最底部

HTMLColllection和 collection

-他们细微的方法有不一样

Question

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ul=document.querySelector(".ct");
var div=document.querySelector(".img-preview");
ul.addEventListener('mouseover',function(e){
    var img=e.target.getAttribute("data-img");
    div.innerHTML='<img src="'+img+'">';
});
</script>

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容。

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
</ul>
<script>
//todo ...
</script>

实现此效果。

链接

如何获取 DOM 计算后的样式？

使用getComputedStyle获取元素计算后的样式，不要通过node.style属性获得

var node = doucument.querySelector('p')
var color = window.getConputedStyle(node).color
console.log(color)

写一个函数，批量操作 css。

function css(node, styleObj){
  for(var key in styleObj){
    node.style[key] = styleObj[key]
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

列出DOM 元素选取的 API。

document对象

document.doctype
document.title
document.characterSet
document.head
document.body
document.images
document.location

element

getElementById(）
getElementsByClassName()
getElementsByTagName()
getElementsByName()
querySelector()
querySelectorAll()

如何创建元素？如何添加元素？

创建元素

createElement()
用来创建HTML元素结点

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

createTextNode()
用来生成文本节点

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

createDocumentFrament()
生成一个DocumentFragment对象

var docFragment = document.createDocumentFragment();

添加元素

appendChild
在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore
在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);