javascript的DOM操作

2019-03-15 本文已影响0人原上的小木屋

补全代码，要求：当鼠标放置在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>
//你的代码
</script>

    var sele_img=document.querySelector(".ct")
    var sele_imgpre=document.querySelector(".img-preview")
    sele_img.addEventListener('mouseover',function(e){
        sele_imgpre.innerHTML=' '
        var image=document.createElement('img')
        imgurl= e.target.getAttribute('data-img')
        image.setAttribute("src",imgurl)
        sele_imgpre.appendChild(image)})

补全代码，要求：

<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>
//你的代码
</script>

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

    var ipt = document.querySelector(".ipt-add-content")
    var start = document.querySelector("#btn-add-start")
    start.addEventListener('click',function(){if(ipt.value){var li = document.createElement('li'); li.innerText=ipt.value;sele_li.insertBefore(li,sele_li.firstChild)}})
    var end = document.querySelector("#btn-add-end")
    end.addEventListener('click',function(e){if(ipt.value){var li = document.createElement('li'); li.innerText=ipt.value;sele_li.appendChild(li)}})
    var sele_li = document.querySelector(".ct")
    sele_li.addEventListener('click',function(e){console.log(e.target.innerText)})

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

<ul class="ct">
    <li>这里是</li>
    <li>飞天虎</li>
    <li>大天堂</li>
</ul>
<script>
//todo ...
</script>

var sele_li = document.querySelector(".ct")
sele_li.addEventListener('click',function(e){console.log(e.target.innerText)})

解释DOM2事件传播机制。

当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分为三个阶段：

1.png
第一阶段：从window对象传导到目标节点，称为“捕获阶段”(capture phase)。
第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”(bubbling phase)。
这种三阶段的传播模型，会使得一个事件在多个节点上触发。

onlick与addEventListener的区别？

onclick事件在同一时间只能指向唯一对象
addEventListener给一个事件注册多个listener
addEventListener对任何DOM都是有效的，而onclick仅限于HTML
addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除
IE9使用attachEvent和detachEvent

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

创建元素

createElement()

createElement方法用来生成HTML元素节点。
var newDiv = document.createElement("div");
createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

createTextNode()

createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
上面代码新建一个div节点和一个文本节点

createDocumentFragment()

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

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);

列出DOM 元素选取的 API。

getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");

getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var elements = document.getElementsByClassName('tab');
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var paras = document.getElementsByTagName("p");
上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。

getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法无法选中CSS伪元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代码返回class属性是note或alert的div元素。

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

function css(node, styleObj) {
     //for-in 遍历对象
     for (var key in styleObj) {
          node.style[key] = styleObj[key]
     }
}

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

获取样式 getComputedStyle

使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性获取
该方法接受一个DOM元素，返回一个样式声明对象【CSSStyleDeclaration】，该样式对象提供了一个getPropertyValue()的方法
window.getComputedStyle[元素对象，伪类],第二个参数选填
举个例子

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

getComputedStyle与style区别

只读和可写

getComputedStyle只读，只能获取样式，不能设置样式；
element.style可读可写，既能获取样式，也能设置样式

获取对象的范围

getComputedStyle获取的是【最终】应用到元素上的【所有】css属性对象；
element.style只能获取到设置在style上的样式，即只能获取元素的行内样式；

getComputedStyle和currentStyle区别

element.currentStyle()跟getComputedStyle功能类似，只是不能获取伪类的样式
IE6 7 8 只能使用element.currentStyle()进行获取样式

一个实现切换的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task6</title>
    <style>
        .box{
            margin:10px 0;
            padding: 10px;
            border:1px solid #ddd;
            box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5)
        }
        .togg{
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>hello</h1>
        <p>batianhu</p>
    </div>
    <button id='add'>add</button>
    <button id='remove'>remove</button>
    <button id='toggle1'>toggle1</button>
    <button id='toggle2'>toggle2</button>

    <script>
        var box = document.querySelector('.box')
        var addbtn = document.querySelector('#add')
        addbtn.addEventListener('click',function(){box.classList.add('togg')})
        var removebtn = document.querySelector('#remove')
        removebtn.addEventListener('click',function(){box.classList.remove('togg')})
        var toggle1btn = document.querySelector('#toggle1')
        toggle1btn.addEventListener('click',function(){
            if(box.classList.contains('togg')){box.classList.remove('togg')}
            else{box.classList.add('togg')}
            })
        var toggle2btn = document.querySelector('#toggle2')
        toggle2btn.addEventListener('click',function(){box.classList.toggle('togg')})
    </script>
</body>
</html>

javascript的DOM操作

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

补全代码，要求：

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

解释DOM2事件传播机制。

onlick与addEventListener的区别？

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

列出DOM 元素选取的 API。

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

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

一个实现切换的demo

猜你喜欢

热点阅读