作业-20170117-DOM


(若愚) #1

课程 PPT

  1. DOM 操作

课程视频

课程任务

题目1: dom对象的innerTextinnerHTML有什么区别?
题目2: elem.childrenelem.childNodes的区别?
题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?
题目4:如何创建一个元素?如何给元素设置属性?如何删除属性
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?
题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>

学习提示

  1. 下次课开始,我们会做出各种效果,拭目以待吧 @VIP10

预习视频


(程文锐) #2

题目1: dom对象的innerText和innerHTML有什么区别?

innerHTML能获取或修改html里的所有内容,而innerText只能获取或修改里面的文本

题目2: elem.children和elem.childNodes的区别?

dom选取页面元素对象的子对象时
children 选取不包括空白节点
而childNodes在firefox会选取空白节点

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

//常见
1、document.getElementById();
2、getElementsByClassName();
3、getElementsByTagName();
4、document.getElementsByName();

//ES5
5、querySelector(css选择器):获取匹配选择器的第一个元素
6、querySelectorAll(css选择器):获取所有匹配选择器的元素

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

//创建
var a=document.createElement('a');
//设置
a.setAttribute('id','box');
//删除
a.romoveAttribute('id');

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

//添加子元素
var box=document.querySelector('.box');
var rop=document.createDocumentFragment();
for(var i=0;i<10;i++){
var a=document.createElement('a');
a.innerText=i;
rop.appendChild(a)
}
box.appendChild(rop);
//有些浏览器会吧换行也当成子元素
function del_space(elem){
var elem_child = elem.childNodes;//得到参数元素的所有子元素
for(var i=0;i<elem_child.length;i++){ //遍历子元素
if(elem_child[i].nodeName == "#text" && /\s/.test(elem_child[i].nodeValue)) {
elem.removeChild(elem_child[i])}
}
}
del_space(box);
//删除
alert(box.removeChild(box.childNodes[1]));

题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

1.add(class1, class2, ...) 添加
2.contains(class) 查找
3.item(index) 下标
4.remove(class1, class2, ...) 删除


//查找是否包含

var a=document.querySelector('div');
if(a.classList.contains('box')){
console.log(true)
}
//添加
a.classList.add('max');
console.log(a.className);

//删除
a.classList.remove('box');
console.log(a.className);

## 题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

//查找到按钮
var btn=document.querySelector('.btn');
//查找到所有的li
var Li=document.querySelectorAll('.mod-tabs ul li');
btn.onclick=function(){
    for(var i=0;i<Li.length;i++){
        Li[i].style.background='red'
    }
}

(小新) #3

马燥

题目1: dom对象的innerTextinnerHTML有什么区别?

innerText:获取对象内文本;
innerHTML :获取对象内字符串;

如:
interHTML:


interText:

题目2: elem.childrenelem.childNodes的区别?
两者对“节点”的理解不同:


代码示例
学习引用

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?
常见方法:

document.getElementById();getElementsByClassName();getElementsByTagName();querySelector()等
ES5的元素选择方法是什么?** 并没有专门的ES5的选择方法吧?

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

创建一个元素:var elem = createElement();
给元素设置属性:elem.setAttribute("id",'attrNmae');
如何删除属性:elem.romoveAttribute("id")

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?
添加子元素:appendChild()方法,在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
删除子元素:removeChild()
parentNode.removeChild(childNode);

题目6: ement.classList`有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

element.classList的方法包括:
- classList.add()用来添加一个class
- classList.remove()用来删除一个class
- classList.toggle("visible", i < 10); 添加/删除 visible,取决于测试条件,i小于10
- classList.contains()用来判断一个元素的class列表中是否包含某个class

题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>

<div class="mod-tabs">
    <ul>
        <li>list1<li>
        <li>list2<li>
        <li>list3<li>
    </ul>
    <button class="btn">点我</button>
</div>
<script>
    var node = document.querySelectorAll('li');
    // nodeCollection=node.children;
    console.log(node) //获取所有li对象

    var btn = document.querySelector(".btn");
    console.log(btn)  //获取button对象

</script>


代码


(Lyndon) #4

题目1: dom对象的innerTextinnerHTML有什么区别?

innerText:是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML:返回元素的HTML结构,而不是元素的文本内容,在写入的时候会自动构建DOM

<div class="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementsByClassName("ct");
    console.log(ct[0].innerText);
    // Lyndon

    // 123dozz
    console.log(ct[0].innerHTML);
    // <p class="para">Lyndon</p>
    // <p class="attr">123<span>dozz</span></p>
</script>

题目2:elem.childrenelem.childNodes的区别?

elem.children:返回一个HTML元素集合(HTMLCollection),HTMLCollection是一个接口,HTMLCollection对象具有namedItem()方法,可以传递id或name获得元素
elem.childNodes:返回一个节点列表(NodeList),NodeList对象只支持id

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    console.log(ct.children);
    console.log(ct.childNodes);
</script>

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

  • getElementById()返回指定匹配ID属性的元素节点,如果没有匹配节点返回null
  • getElementsByClassName()返回类数组对象(HTMLCollection类型的对象),任何元素的变化都会实时反映在返回的集合中,包含了所有class名字符合指定条件的元素,该方法可以在任何元素节点上调用
  • getElementsByTagName()返回所有指定标签的元素,返回值是一个HTMLCollection对象,任何元素的变化都会实时反映在返回的集合中,该方法可以在任何元素节点上调用
  • getElementsByName()选择拥有name属性的HTML元素,返回一个NodeList格式对象,不实时反映元素的变化
  • querySelector()返回匹配指定的CSS选择器的元素节点,如果有多个节点满足匹配条件,返回第一个匹配节点,如果没有匹配节点,返回null
  • querySelectorAll()返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象,NodeList对象不是动态集合,元素节点的变化无法实时反映在返回结果中
  • elementFromPoint()返回位于页面指定位置的元素

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="para">LUOC</p>
    <p class="attr">123<span>dozz</span></p>
    <form action="" name="x" method="get"></form>
</div>
<script>
    var elem_1 = document.getElementById("ct");
    var elem_2 = elem_1.getElementsByClassName("para");
    var elem_3 = elem_1.getElementsByTagName("p");
    var elem_4 = document.getElementsByName("x");
    var elem_5 = document.querySelector(".para");
    var elem_6 = document.querySelectorAll(".para")
    console.log(elem_1);
    console.log(elem_2);
    console.log(elem_3);
    console.log(elem_4[0].tagName);
    console.log(elem_5);
    console.log(elem_6);
</script>

  • ES5的元素选择方法:querySelector()querySlectorAll()

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

  • 创建元素:createElement()生成HTML元素节点,createTextNode()生成 文本节点,createDocumentFragment()生成一个DocumentFragment对象,常用来生成比较复杂的DOM结构,然后插入当前文档,不会引发网页的重新渲染。

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("new zone");
    newDiv.appendChild(newContent);
    ct.appendChild(newDiv);
    console.log(document.body);
</script>

  • 给元素设置属性:setAttribute()

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    ct.setAttribute("class", "name");
    console.log(document.body)
</script>

  • 删除元素属性:removeAttribute()

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

  • 给页面元素添加子元素:appendChild()在元素末尾添加元素,insertBefore()在某个元素之前插入元素

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("new zone");
    var insertContent = document.createTextNode("add new zone");
    newDiv.appendChild(newContent);
    newDiv.insertBefore(insertContent, newDiv.firstChild);
    ct.insertBefore(newDiv, ct.firstChild);
</script>

  • 删除页面元素下的子元素:removeChild()

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("new zone");
    var insertContent = document.createTextNode("add new zone");
    newDiv.appendChild(newContent);
    newDiv.insertBefore(insertContent, newDiv.firstChild);
    ct.insertBefore(newDiv, ct.firstChild);
    ct.removeChild(newDiv);
</script>

题目6:element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

element.classList的方法包括:
- classList.add()用来添加一个class
- classList.remove()用来删除一个class
- classList.contains()用来判断一个元素的class列表中是否包含某个class

题目7:如何选中如下代码所有的li元素? 如何选中btn元素?

<body>
<div class="mod-tabs">
    <ul>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
    <button class="btn">点我</btn>
</div>
<script>
    var li = document.querySelectorAll("li");
    console.log(li);
    var btn = document.getElementsByClassName("btn");
    console.log(btn[0]);
</script>
</body>


(欧晓春) #5

欧晓春


Q1:dom对象的innerText和innerHTML有什么区别?

两者都是查询Node对象里的值,但是又有所不同

  • 查看的值不同
    innerText:查看的是元素中的文本节点,在有多层文本的情况下,展示会由浅入深;
    innerHTML:查看的不只是元素中的文本节点,还包括HTML标签,它会把HTML标签做转义处理,然后与文本一起展示出来;
    例子:

  • 输入的值不同:
    innerText:当使用innerText输入HTML标签的时候,HTML标签会被做转义处理,然后以文本的形式输入到元素中;


    innerHTML:如果使用innerHTML输入HTML标签,它不会对输入的标签做转义处理,这样输入的HTML标签就是一个元素;
    0_1484700077388_upload-03acf877-c850-4273-93a4-4d23d29f46b8

  • 考虑
    为了提高web的安全性,最好采用innerText的方式进行输入,防止恶意用户输入代码执行恶意程序;

Q2:elem.children和elem.childNodes的区别?

  • 此外
    elem.childNodes有相同效果,会查询子元素和文本节点的还有如下属性:
    elem.firstChild
    elem.lastChild
    elem.nextSibling
    elem.previousSibling

Q3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

  • 查询元素有几种常见方法
    • 通过它的父元素查询子元素
      1.elem.children以及elem.childNodes
      0_1484702216121_upload-a9d6ac26-0933-469a-9b14-6e882bc6bb44
      2.elem.firstChildelem.lastChild
    • 通过邻居元素查询
      1.elem.nextSiblingelem.previousSibling
      但是该这两种方法查询的包括文本节点;
      0_1484702613698_upload-4abdfa96-f4c9-4e7b-9173-f4f87a0d571d
      2.其实最好是用elem.nextElementSiblingelem.previousElementSibling
      这两个方法只查询元素节点;
      0_1484702690362_upload-931c1506-7e27-4c5d-b8dc-055f5f476d21

    • 通过子元素查询父元素
      elem.parentNodeelem.parentElement
      0_1484702869371_upload-c93b6d37-c1c2-4fcc-b0f1-a49233c21724

  • ES5的元素选择方法是什么?
    ES5中选择元素的方法有两种,使用方法都是填入标签名、#+id、.+class
    document.querySelector():返回被选择的元素,如果有多个符合选择的元素,那么只返回第一个;
    document.querySelectorAll():返回被选择的元素组成的数组,可以有多个;
    • 可以改造一下变成类似JQ的元素选择方法:

function $(e){
        if(document.querySelectorAll(e).length > 1){
            return document.querySelectorAll(e);
        }else{
            return document.querySelector(e);
        }
    }

输出结果:
0_1484703711977_upload-8b881c43-7f41-4e73-9673-05373f5bbc58


Q4:如何创建一个元素?如何给元素设置属性?如何删除属性

  • 如何创建一个元素?;
    创建一个元素有两种办法
    1.使用innerHTML创建标签字符串,然后插入父元素中:


    2.使用document.createElement创建元素,该元素在未插入HTML文档中时,只能在JS中访问到:
    0_1484705388280_upload-3dcd50f9-6ed1-4478-ac70-99c905aa7587

  • 如何给元素设置属性?
    1.先使用document.createAttribute创建属性赋予一个变量,然后用该变量.nodeValue = '属性的值'创建属性的值,最后用elem.setAttributeNode(该变量)插入元素中:
    0_1484708922348_upload-02c83576-f31b-443a-92ac-39f9110a8d97
    2.直接使用elem.setAttribute('属性名','值')进行设置:
    0_1484709002106_upload-38f23275-1495-4a07-b88f-e0d1a20536a8

  • 如何删除属性?
    1.使用elem.removeAttribute(属性名)进行删除
    0_1484709160857_upload-626913e2-d924-487c-b3d0-dfa04921d2fc

PS:还可以用elem.classList里面的方法为元素添加class;

Q5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

  • 如何给页面添加子元素?
    1.对父元素的innerHTML赋值,值是字符串形式的HTML标签:
    0_1484709457618_upload-1d7d2f69-ccc3-483c-b3c9-c6d68571aa37
    2.使用document.createElement()创建元素后,再用父元素.appendChild(新建元素)插入父元素中:
    0_1484709639238_upload-3e271171-cd92-44da-8f07-020e17672cac
  • 如何删除页面元素下的子元素?
    1.直接对父元素的innerHTML赋值一个空字符串(该方法会删除掉父元素下面的所有子元素):

    2.使用replaceChild()替换掉父元素中的选定子元素:
    0_1484709946610_upload-8b2a903b-f70b-4347-b5bf-4d1b5ef2c9c4

Q6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

  • element.classList有哪些方法?
    element.classList有如下方法:
    0_1484710089867_upload-0cfca642-93a3-46cb-a4ec-828f6abaa0c8
    其中最常用的有add、contains、remove三种;

  • 如何判断一个元素的 class 列表中是包含某个 class?
    判断一个元素的class列表中是否包含某个class有三种办法:classList.contains、className、getAttribute

  • 如何添加一个class?
    添加一个class可以使用classList.add、className、setAttribute三种方法,推荐第一种:

  • 如何删除一个class?
    添加一个class可以使用classList.remove、className、setAttribute三种方法,推荐第一种:
    0_1484711162154_upload-ecd18730-01f3-40a1-a524-35ac65fadc28

Q7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>

(睿骐) #6

题目1: dom对象的innerText和innerHTML有什么区别?

  • innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
  • innerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM

题目2: elem.children和elem.childNodes的区别?

  • element.children只输出普通的DOM元素
  • element.childNodes会输出所有的子元素,包括文本节点、文字
  • 大多数情况下我们应该使用element.children

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

(1)getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点,则返回null。这也是获取一个元素最快的方法

var element = document.getElementById("test");

(2)getElementsByClassName()

返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用

var element = document.getElementsByClassName(names);

(3)getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素(搜索范围包括本身)。返回值是一个HTMLCollection对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

(4)getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化

// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

(5)querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent h1');

querySelector方法无法选中CSS伪元素。

(6)querySelectorAll()

  • querySelectorAll方法返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);
  • querySelectorAll方法的参数,可以是逗号分隔的多个CSS选择器,返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代码返回class属性是note或alert的div元素。


题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

  • 创建一个元素:

var newDiv = document.createElement("div");
  • 给元素设置属性:

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

//<div id="div1" my_attrib="newVal">…</div>
  • 删除属性:

node.removeAttribute('my_attrib');
//<div id="div1">…</div>

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

  • 添加子元素 appendChild()

<html>    
	<title>test page</title>
    <body>  
        <div id="d1"><p id="p1">hello world </p></div>  
        <div id="d2">test page</div>
        <div id="d3">hello jirengu</div>

        <script>
        	var d4 = document.createElement("div");
        	//d4.setAttribute("id","d5");
        	var node = document.getElementById("d2");
        	var text = document.createTextNode("hello hangzhou");
        	d4.appendChild(text);
        	node.appendChild(d4);
        </script>
    </body>  
</html>

  • 在某个元素之前插入元素insertBefore()

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
  • 删除子元素emoveChild()

parentNode.removeChild(childNode);

题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

方法:

  • add()

node.classList.add('active')
  • remove()

node.classList.remove('active')
  • contains()

node.classList.contains('active')
  • toggle ( String [, force] )

当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

node.classList.toggle("visible");

添加class,删除class

<html>    
	<title>test page2</title>
    <body>  
        <div class="foo bar">hello jirengu</div>
        
        <script>
        
            var node = document.querySelector(".foo");
            node.classList.remove("foo"); //删除一个class
            
            node.classList.add("ct")// 添加一个class
            
            var a = node.classList.contains("ct");
            console.log(a);// 判断一个元素的 class 列表中是包含某个 class
        </script>
    </body>  
</html>

题目7:如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>
  • 选中所有li元素:

        <script>
            var node = document.querySelectorAll('.mod-tabs>ul>li');
            console.log(node);
        </script>
  • 选中btn元素

var btns = document.querySelector('.btn');
console.log(btns);

(李瑛) #7

题目1: dom对象的innerText和innerHTML有什么区别?

innerText:返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容(去除html标签,拼接内容)
innerHTML:返回元素的HTML结构,在写入的时候也会自动构建DOM(保留html标签)

题目2: elem.children和elem.childNodes的区别?

elem.children:数据类型为HTMLCollection,子元素节点列表
elem.childNodes:数据类型为NodeList,子节点列表,包括元素节点和文本节点

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

查询元素的方法:

  • getElementById(),返回匹配指定ID属性的唯一元素节点。如果没有发现匹配的节点,则返回null
  • getElementsByClassName(),返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。
  • getElementsByTagName(),返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有符合指定标签名的元素(搜索范围包括本身)。搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。
  • getElementsByName(),用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化。
  • querySelector(),返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
  • querySelectorAll(),返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。
  • elementFromPoint(),返回位于页面指定位置的元素。

ES5的元素选择方法:querySelector()、querySelectorAll()和elementFromPoint()

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

创建元素:

var newDiv = document.createElement("div");//<div></div>

给元素设置属性:

newDiv.setAttribute('id', 'footer');//<div id="footer"></div>

删除属性:

newDiv.removeAttribute('id');//<div></div>

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

给页面添加子元素:

var newDiv = document.createElement("div");//<div></div>
var newText = document.createTextNode('hello');
newDiv.appendChild(newText);
document.body.appendChild(newDiv);

删除页面元素下的子元素:

parentNode.removeChild(childNode);//document.body.removeChild(newDiv)

题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

element.classList是一个只读属性,返回一个元素的类属性的实时 DOMTokenList集合。

element.classList的方法:(此处value为需要添加的className)

  • add(value):将指定的字符串值添加到列表中。如果值已经存在,就不添加了。
  • contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
  • remove(value):从列表中删除指定的字符串。
  • toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
  • item(index):根据索引值,查找DOMTokenList中的value值。

判断一个元素的 class 列表中是包含某个 class:

var dd = document.getElementsByClassName('ct')[0];
//dd   <div class="ct clearfix" id="main">
//dd.classList         ["ct", "clearfix"]
dd.classList.contains('clearfix');//true

如何添加一个class:

dd.classList.add('wrap');
//dd    <div class="ct clearfix wrap" id="main">
//dd.classList         ["ct", "clearfix", "wrap"]

如何删除一个class:

dd.classList.remove('clearfix');
//dd.classList        ["ct", "wrap"]

题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button >
</div>

选中所有的li元素:

var list = document.querySelectorAll('.mod-tabs li');
//list   [li, li, li]

选中btn元素:

var btn = document.querySelector('.btn');
//btn    <button class="btn">点我</button>

(joyside) #9

题目1: dom对象的innerText和innerHTML有什么区别?

  • Node.innerText是一个可写属性(非标准,不建议使用),返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。

  • element.innerHTML可以用来获取、修改指定元素内的所有标签和内容。


题目2: elem.children和elem.childNodes的区别?

ParentNode.children 是一个只读属性,返回一个包含当前元素的子元素的集合,该集合为一个即时更新的HTMLCollection。
Node.childNodes 返回包含指定节点的子节点的集合,返回一个包含当前元素的子元素的集合,该集合为一个即时更新的NodeList 。

注:主要不同在于HTMLCollection是元素集合,而NodeList是节点集合(即可以包含元素,也可以包含文本节点


题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

  • getElementById()
    getElementsByClassName()
    getElementsByTagName()
    getElementsByName()
  • querySelector()
    querySelectorAll()

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

  • 创建元素
    • 将需要创建的元素,以字符串的形式拼接。找到父级元素,直接对父级元素的innnerHTML进行赋值。
    • 通过Document.createElement()创建元素后,在指定父级元素中使用appendChild()或使用insertBefore()等方法添加元素。
  • setAttribute()方法用于设置元素属性
  • romoveAttribute()方法用于删除元素属性
  • removeChild()方法用于删除元素使用

题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

  • classList.add()
    classList.remove()
  • Element.classList.contains() 检查元素的类属性中是否存在指定的类值。
  • Element.classList.add() 添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
  • Element.classList.remove() 删除指定的类值。

题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>


<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</btn>
</div>
<script>
    //选中所有li及button元素
    var oDiv = document.getElementsByClassName('mod-tabs');
    var aLi = oDiv[0].getElementsByTagName('li');
    console.log(aLi)
    var oBtn = document.getElementsByClassName('btn')
    console.log(oBtn[0])
    //使用querySelectorAll选中所有li元素及button元素
    var aLi2 = document.querySelectorAll('.mod-tabs>ul>li');
    console.log(aLi)
    var oBtn2 = document.querySelectorAll('.btn');
    console.log(oBtn[0])
</script>


(萨达哈鲁) #10

题目1: dom对象的innerText和innerHTML有什么区别?

innerText返回的元素的文本内容。
innerHTML返回的是元素的所有内容包括标签。

题目2: elem.children和elem.childNodes的区别?

elem.children返回指定元素的子元素集合,但是只返回元素节点。
elem.childNodes返回指定元素的子元素集合,包括元素节点,属性节点,文本节点,注释节点。

题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?

document.getElemnetById();//通过id查找
document.getElemnetsByClassName();//通过class查找
document.getElemnetsByTagName();//通过标签名查找
document.getElementsByName;//通过元素的name名查找
document.elementFromPoint();//通过元素在页面上的位置查找

ES5的元素选择方法是:

document.querySelector();//通过id名或class名查找,只返回找到的第一个元素
document.querySelectorAll();//通过id名或class名查找,返回找到的所有元素

例子:

题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?

题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

  • element.classList的方法有:
    1. add(class1, class2, ...),在元素中添加一个或多个类名,如果指定的类名已存在,则不会添加。
    2. contains(class),返回布尔值,判断指定的类名是否存在。
    3. remove(class1, class2, ...),移除元素中一个或多个类名。
    4. toggle(class, true|false), 在元素中切换类名。
  • 判断一个元素的 class 列表中是包含某个 class用element.classList.contains(class),例子:
  • 添加和删除class

题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>
  • 选中所有li元素

document.getElementsByTagName('li');
  • 选中btn元素:

document.querySelector('.btn');


(zhitaochan) #12

作业


(饥人谷_朱维) #13

简书


(再睡一下) #14

徐国军


1、dom对象的innerText和innerHTML有什么区别?

  • innerHTML:获取从对象的起始位置到终止位置的全部内容,包括Html标签。
  • innerText:获取从起始位置到终止位置的内容, 但它去除Html标签。

2、elem.children和elem.childNodes的区别?

  • elem.children:查询的是elem的子元素,不包括文本节点;
  • elem.childNodes:查询的是elem的子元素和文本节点;

3、查询元素有几种常见的方法?ES5的元素选择方法是什么?

有三种常见的方法:

  • getElementById:该方法返回一个与那个有着给定id属性值得元素节点对应的对象。
  • getElementByTagName:该方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。
  • getElementsByClassName:该方法可以通过class属性中的类名来访问元素,这个方法的返回值是一个具有相同类名的元素的数组。
  • getElementsByName:该方法用于选择拥有name属性的HTML元素。

ES5的元素选择方法:

  • querySelector:该方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第⼀个匹配的节点。如果没有发现匹配的节点,则返回null。
  • querySelectorAll:该方法返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。

4、如何创建一个元素?如何给元素设置属性?如何删除属性

  • 使用createElement()创建一个元素的标签,生成一个html元素节点.
  • 使用setAttribute()来给元素设置属性,其中传入两个值,第一个值为元素的属性名,第二个值是设置的属性值。
  • 使用removeAttribute()来删除元素的属性,直接传入需要删除的元素属性名即可。

5、如何给页面元素添加子元素?如何删除页面元素下的子元素?

如何给页面元素添加子元素:

  • 使用appendChild()给页面元素添加子元素。
  • 使用 insertBefore()在某个子元素之前插入子元素。

如何删除页面元素下的子元素:

  • 使用removeChild()来删除元素下的元素,直接传入需要删除的元素即可。

6、element.classList有哪些方法?如何判断一个元素的 class 列表中是否包含某个 class?如何添加一个class?如何删除一个class?

element.classList常用的方法有:

  • classList.contains()用来判断一个元素的class列表中是否包含某个class。
  • classList.add()用来添加一个class。
  • classList.remove()用来删除一个class。

7、如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
   <ul>	
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
<script>	
    var li = document.getElementsByTagName("li");
    console.log(li);
    var btn = document.getElementsByClassName("btn");
    console.log(btn);
</script>

(梁树汉) #15

1.DOM对象的innerText和innerHTML有什么区别

innerText:返回元素内包含的内容,如果元素内签到多层元素则由浅到深依次拼接在一起

<body>
<ul id="list">
  <p>
    123
    <span>456</span>
</p>

</ul>

</body>
<script>
var List=document.getElementById('list');
var output=List.innerText


console.log(output)
console.log(List.innerHTML)
console.log(List.outerHTML)

</script>

2.elem.children和elem.childNodes的区别

<body>
<ul id="list">
  <p>
    123
    <span>456</span>
</p>

<p>第二个段落</p>
<p>第三个</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText

console.log('-------这是分割线------')

console.log(List.children)
console.log(List.childNodes)

3.查询元素有几种常见的方法?ES5的元素选择方法是什么?

  • getElementById()
  • getElementByTagName()
  • getElementByClassName()
  • getElementByName()
  • ##### ES5选择方法
  • querySelector()
  • querySelectorAll()
  • elemenFromPoint()

4.如何创建一个元素?如何给元素设置属性?如何删除属性?

  • createElement()

    var newDiv=document.creatElement('div')
    //在DOM下创建一个div标签

  • createTextNode()

    var newDiv=document.createElement('div')
    var newContent=document.createTextNode('hello world')
    //用来生成文本节点,参数为所要生成的文本节点内容

  • createDocumentFragment()

    var docFrangment=document.createDocumentFragment();
    //用来生成一个DocumentFragment();

5.如何给页面元素添加子元素?如何删除页面元素下的子元素?

  • appendChild()

    var newDiv =document.createElement('div')
    var newContent=document.createTextNode('hello')
    newDiv.appendChild(newContent)

  • removeChild()

6.element.classList有哪些方法?如何判断一个元素的class列表中包含某个class?如何删除一个class?

element.classList的方法
- classList.add()用来增加一个class
- classListremove()用来删除一个class
- classList.toggle('visible',i<num);增加/删除visible,取决测试条件
- classList.contains()用来判断一个元素的class列表中是否包含某个class

7.如何选中如下代码所有的li元素?如何选择btn元素?

<div class="mod-tabs">
    <ul>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
    <button class="btn">点我</button>
</div>

代码:

<div class="mod-tabs">
<ul>
	<li>list1</li>
	<li>list2</li>
	<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>  
  </body>
  <script>
var getNode=document.querySelectorAll('li') // 选择所有的li

var btn =docunemt.querySelector('.btn')//获取类名为btn的元素
console.log(getNode);
console.log(btn);
 </script>

(张翼翔) #17

张翼翔

简书


(杨扬) #18

简书作业


(蒋恒) #19

简书