Dom元素及其操作

Dom元素及其操作

• Document Object model(文件对象模型)

document对象

html文档都会变成

• document.head
• document.body

readyState

返回当前文档状态

1. loading：加载HTML代码阶段，尚未完成解析
2. interactive：加载外部资源阶段
3. 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.把字符串放到页面上去

常见使用方法

修改样式

可修改元素的样式

• 原本’-'的时候变为驼峰的形式
• 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

element.offsetHeight

scrollHeight

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

scrollTop

页面已经滚动的值

window.innnerHeight

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

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

HTMLColllection和 collection

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

Question

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

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

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

    
这里是
    
饥人谷

实现此效果。

链接

如何获取 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);