DOM

作者: 好奇男孩 | 来源:发表于2018-03-25 23:19 被阅读23次

dom 级别和dom 事件处理
WY-DOM编程
DOM事件
DOM事件
js红包雨活动
DOM操作的分类
虚拟 DOM 和 diff 算法
jQuery——DOM
JavaScript高级程序设计前四章
DOM分级详解

什么是DOM？

可能很多人第一反应就是div、p、span等html标签（至少之前我是），但要知道，DOM是Model，是Object Model，对象模型，是为HTML（and XML）提供的API。
HTML(Hyper Text Markup Language)是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。
但在浏览器端，前端们可以用脚本语言（JavaScript）通过DOM去操作HTML内容。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的

6.png

注意：

操作DOM的成本很高（浏览器渲染的reflow和repaint）

document 对象

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

document对象常用属性

1.document.location;

location属性返回一个只读对象，提供了当前文档的URL信息

2.document.open()、document.close();

新建一个文档，供write方法写入内容;关闭open方法所新建的文档;

3.document.write();

向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。

4.Element:

nodeName：元素标签名;
nodeType：元素类型;
className：类名;
id：元素id;
children：子元素列表（HTMLCollection）;
childNodes：子元素列表（NodeList）;
firstChild：第一个子元素

5.查询元素:

getElementById方法返回匹配指定ID属性的元素节点;
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）;
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）;
getElementsByName方法用于选择拥有name属性的HTML元素;

querySelector方法返回匹配指定的CSS选择器的元素节点。(推荐使用）

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。(推荐使用）

创建元素：

createElement方法用来生成HTML元素节点。
reateTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
createDocumentFragment方法生成一个DocumentFragment对象。

修改元素：

appendChild()；在元素末尾添加元素
insertBefore()；在某个元素之前插入元素

删除元素使用removeChild()方法；

cloneNode()克隆元素

方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身；

属性操作：

getAttribute()用于获取元素的attribute值；
createAttribute()方法生成一个新的属性对象节点，并返回它；
setAttribute()方法用于设置元素属性；
removeAttribute()用于删除元素属性；
innerText是一个可写属性，返回元素内包含的文本内容；

注意：innerHTML和innerText区别，它不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM；

getComputedStyle获取元素计算后的样式；（不要使用Element.style）

Element.classList ；class 操作：

classList.add('active') //新增 class
classList.remove('active') //删除 class
classList.toggle('active') //新增/删除切换
classList.contains('active') // 判断是否拥有 class

常规流程

创建元素：

1.createElement方法用来生成HTML元素节点。
2.createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
3.createDocumentFragment方法生成一个DocumentFragment对象。

添加元素：

appendChild()，在元素末尾添加元素；
insertBefore()；在某个元素之前插入元素；

注意：

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

HTMLCollection 和 NodeList

节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。
NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性
以下方法获取的为HTMLCollection对象

document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")

以下方法获取的为NodeList对象

document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes

如何查看？

document.body.childNodes.constructor

HTMLCollection与NodeList基本相似

相同点：都是类数组对象，节点的变化都会实时反映在集合中
不同点：少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有

范例：

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

 <title>图片库</title>
    <style>
        ul{
            margin: 10px auto;
            text-align: center;
        }
        li{
            display: inline-block;
            list-style: none;
            padding: 20px 20px;
        }
        div{
            margin: 0 auto;
            border: 1px solid #aaaaaa;
            width: 400px;
            height: 400px;
        }
        div img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!--要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。-->
<ul class="ct">
    <li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy18g4toj309q063q37.jpg">查看图片1</li>
    <li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy1trlqhj309q06374e.jpg">查看图片2</li>
    <li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy24njg9j309q063jro.jpg">查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var li=document.querySelectorAll("li");
    var div=document.querySelector(".img-preview");
    for(var i=0;i<li.length;i++){
        li[i].addEventListener('mouseover',function(){
            var img=this.getAttribute('data-img');
            div.innerHTML='<img src="'+img+'">';
        })
    }
</script>
</body>

7.png

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>这里是</li>
    <li>杭电</li>
    <li>小灰</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
    //你的代码
    var ul=document.querySelector('.ct');
    var li=document.querySelectorAll('.ct li');
    var text=document.querySelector('.ipt-add-content');
    var addStart=document.querySelector('#btn-add-start');
    var addEnd=document.querySelector('#btn-add-end');
    ul.addEventListener('click',function(e){
          console.log(e.target.innerText);

    });
       addStart.addEventListener('click',function(){
         if(text.value!==""){
             var newLi=document.createElement('li');
             newLi.innerHTML=text.value;
             ul.insertBefore(newLi,ul.children[0]);
         }
       });
    addEnd.addEventListener('click', function (){
         if(text.value!==""){
             var newLi=document.createElement('li');
             newLi.innerHTML=text.value;
             ul.appendChild(newLi,ul.children[0]);
         }
    })
</script>

8.png

切换样式

<div class="box">
    <h1>hello world</h1>
    <p>pengxiaohui</p>
    <button id="add">add</button>
    <button id="remove">remove</button>
    <button id="toggle1">toggle1</button>
    <button id="toggle2">toggle2</button>
</div>
<script>
    var add=document.querySelector('#add');
    var remove=document.querySelector("#remove");
    var toggle1=document.querySelector('#toggle1');
    var toggle2=document.querySelector('#toggle2');
    var box=document.querySelector(".box");
    add.addEventListener('click',function(){
        box.classList.add('active');
    });
    remove.addEventListener('click',function(){
        box.classList.remove('active');
    });
    toggle1.addEventListener('click',function(){
        box.classList.toggle('active');
    });
    toggle2.addEventListener('click', function (){
        if(box.classList.contains('active')){
            box.classList.remove('active');
        }else{
            box.classList.add('active');
        }
    })
</script>

9.png

写一个函数，批量操作 css

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

网友评论

IT人故事会:老铁下次注意格式啊，不太清晰，给点建议对于新手需要的是注释啊
好奇男孩:@IT人故事会好的👌

本文标题：DOM

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

DOM

什么是DOM？

注意：

document 对象

document对象常用属性

1.document.location;

2.document.open()、document.close();

3.document.write();

4.Element:

5.查询元素:

querySelector方法返回匹配指定的CSS选择器的元素节点。(推荐使用）

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。(推荐使用）

创建元素：

修改元素：

删除元素使用removeChild()方法；

cloneNode()克隆元素

属性操作：

注意：innerHTML和innerText区别，它不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM；

getComputedStyle获取元素计算后的样式；（不要使用Element.style）

Element.classList ；class 操作：

常规流程

创建元素：

添加元素：

注意：

HTMLCollection 和 NodeList

范例：

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

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.当点击每一个元素li时控制台展示该元素的文本内容。

切换样式

写一个函数，批量操作 css

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读