javaScript DOM的样式和属性

HelKyle 发布于2019-08-20 13:44 / 2726人阅读

摘要：用对象的方式来描述元素，规范包含了节点操作节点遍历前一个兄弟节点后一个兄弟节点节点类型元素节点文本节点元素节点遍历无法遍历到文本节点获取节点获取的节点是动态的，会实时改变不支持写一个兼容函数获取的是静态的，节点改变时它无法改变修改节点不支持

DOM

Document Object Model 用对象的方式来描述html元素， API规范包含了DOM Core DOM HTML DOM
Style Dom Event

节点操作

节点遍历

.parentNode
.firstChild
.lastChild
.previousSibling //前一个兄弟节点
.nextSibling //后一个兄弟节点

节点类型

ELEMENT_NODE //元素节点
TEXT_NODE //文本节点

元素节点遍历

p.firstElementChild // 无法遍历到文本节点
 .lastElementChild
 .nextElementSibling 
 .previousElementSibling

获取节点

getElementById()
getElementsByTagName()
//获取的节点是动态的，会实时改变
getElementsByClassName()
    // IE678 不支持  写一个兼容函数
    function getElementsByClassName(root, className){
        if(root.getElementsByClassName){
            return root.getElementsByClassName(className);
        }else{
            var elements = document.getElementsByTagName("*");
            var result = [];
            for(var i = 0, element; element = elements[i]; i++){
                if(hasClassName(element, className)){
                    result.push(element)
                }
            }
            return result;
        }
    }

querySelector/All()
获取的list是静态的，节点改变时它无法改变

修改节点

textContent
    user.textContent = "kash"; // IE9不支持

innerText
  // firefox不支持

创建节点

创建Element节点
    document.createElement()
创建Text节点
    document.createTextNode()

插入节点

appendChild()
insertBefore()
    ul.insertBefore(li, ul.firstBefore);

删除节点

n.parentNode.removeChild(n);

替换节点

n.parentNode.replaceChild(target, n);

innerHTML

内存泄露
安全问题

总结

属性操作

每个html属性对应DOM属性

property accessor 属性访问器

//读取属性

    用户名：
    

input.className(); //u-text
input["id"] //username

//写入属性
input.value = "www.XXX.com";
input.disabled = true;
//通用性差，扩张性差，好处:取到的都是实用对象

getAttribute/setAttribute

var attribute = element.getAttribute(attributeName);


    用户名：
    

input.getAttribute("class"); //"u-text";
input.setAttribute("value", "wwww.xxx.com");
input.setAttribute("disabled","")//默认为true
//如果属性出现Boolean,那肯定是true
// 获取到的仅字符串，通用性好

样式操作

更新样式

 1.一种是直接操作
    element.style.color = "red";
        更新一个属性需哟一跳语句
        不是我们熟悉的css
    element.style.cssText = "color:red";
        样式混在逻辑中

2.另一种更新class
    element.className += "";
    一次性更新很多的样式(类似于换肤)
        更换样式表:把需要更换的样式分离 
        element.href = ".css"

获取样式

element.style.color //只能获取到内嵌样式
window.getComputedStyle(element).color //IE9不支持

GPU云服务器云服务器使用Javascript和DOM javascript的dom对象 javascript的dom编程 DOM元素属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81220.html

JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件！

摘要：向影子树添加的任何内容都将成为宿主元素的本地元素，包括，这就是影子实现样式作用域的方式。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作...

godlong_X 2019-08-26 13:29 评论0 收藏0
JavaScript DOM

摘要：但上述两个情况中都是同一份文档。提示对象是对象的一部分，可通过属性对其进行访问。返回包含指定节点的子节点的集合，该集合为即时更新的集合。对象在中，对象表示元素属性节点的无序集合。 DOM简介（ Document Object Model 文档对象模型） W3C W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C D...

Nekron 2019-08-20 16:38 评论0 收藏0
JavaScript 编程精解中文第三版十四、文档对象模型

摘要：在其沙箱中提供了将文本转换成文档对象模型的功能。浏览器使用与该形状对应的数据结构来表示文档。我们将这种表示方式称为文档对象模型，或简称。树回想一下第章中提到的语法树。语言的语法树有标识符值和应用节点。元素表示标签的节点用于确定文档结构。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：The Document Object Model 译者：飞龙协议...

gggggggbong 2019-08-23 18:19 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

yuxue 2019-08-22 15:51 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

MASAILA 2019-08-02 10:04 评论0 收藏0