美文网首页
DOM 文档对象模型 操作文档

DOM 文档对象模型 操作文档

作者: 楼水流云 | 来源:发表于2019-10-08 15:08 被阅读0次

    document.doutype (常用)

    document.location 返回一个只读对象 提供了当前文档的URL信息 只要输入这个就能得到下面所有
    .location.href 完整网址
    .location.protocol //http:
    .location.host www.baidu.com:4097
    .location.hostname www.baidu.com
    .location.port 4097
    .location.pathname path/a.html
    .location.search ?x=111
    .location.hash #part1
    .location.user user
    .location.password passed

    .location.href = "http://jirengu.com"   当前页面会跳转到指定页面
    .location.reload(true) 页面刷新 重载
    .location.assign("http://jirengu.com")
    

    document.Element 表示html元素 (常用)
    .Element.nodeName 元素标签名 还有个类似的tagName
    .Element.nodeType 元素类型
    .Element.className 类名
    .Element.id 元素id
    .Element.children 子元素列表(HTMLCollection)
    .Element.childNodes 子元素列表(NodeList)
    .Element.firstChild 第一个子元素
    .Element.lastChild 最后一个子元素
    .Element.nextSibing 下一个邻居元素
    .Element.previousSiblibg 上一个邻居元素
    .Element.parentNode、parentElement 父元素
    .elementFromPoint(x,y) 返回位于页面指定的位置的元素

    .document.getElementById("ct") 用id的方法选择
    .document.getElementsByClassName("title")  用class的方法来选择
    .document.getElementsByTagName("a") 用标签a 的方法来选择
    

    document.title 当前文档标题 可写
    .innerText 返回元素内包含的文本内容 会省略所有标签 会按照元素从浅到深的顺序拼接内容 可读可写 ct.innerText = "hello"
    .innerHTML 返回html 可读可写 ct.innerHtTML = "<img src=http://jirengu.com>"
    .outerHTML
    .cookie 存储在客户端的文本

    .characterSet 返回渲染当前文档的字符集
    .readyState 返回当前文档的状态 <loading>加载中 <interactive>加载外部资源 <complete>加载完成
    .compatMode 返回文档模式 
    .then
    .promise
    

    选择
    document.querySelector("#ct a")或者("#ct .title") 方便 如有多个只会选中第一项 1个 (有兼容性问题)
    document.querySelectorAll("#ct a")或者("#ct .title") 方便 类数组对象 能得到所有的 (有兼容性问题)

    创建
    document.createElement("img") 创建一个标签 生成html的节点
    document.createTextNode() 创建一个文本节点 标签里内容的文本
    document.createDocumentFragment() 一个复杂的dom元素 生成完后插入到当前文档作用 使性能更好 如大量的dom操作 可以一次性操作完 然后插入页面 这样页面只要重绘一次就行了
    document.createAttribute(name) 用于创建一个属性节点 如name 【直接用setAttribute就好了】

    操作DOM元素
    ct .appendChild(img) 在ct元素末尾添加什么元素 如这个img标签
    .insertBefore(newContent,newDiv.firstChild) 在元素之前插入元素
    .replaceChild() 接受两个参数: 要插入的元素和要替换的元素
    .removeChild() 删除某个元素
    .cloneNode(true) 克隆 传入true会深复制 false只复制元素本身
    .classList.add("active") 添加删除class add添加 remove删除 contains判断是否包含

    属性操作
    ct .getAttribute(id) 用于得到获取元素的属性值 比如获得id能得到ct 获得href能得到 地址http://
    .setAttribute('src','http://图片地址.gif') 用于设置属性 如设置src的值
    .removeAttribute('id') 用于删除元素属性 如id

    相关文章

      网友评论

          本文标题:DOM 文档对象模型 操作文档

          本文链接:https://www.haomeiwen.com/subject/rvqcpctx.html