一、dom对象的innerText和innerHTML有什么区别？
- innerText：返回元素内包含的文本内容，元素多层嵌套的时候，会按照元素由浅到深的顺序拼接其内容。
- innerHTML：不仅返回元素内包含的文本内容，同时也会返回元素的HTML结构。
二、elem.children和elem.childNodes的区别？
- elem.childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；
- elem.children：：获取子元素的元素节点（只包括元素节点）；
三、查询元素有几种常见的方法？ES5的元素选择方法是什么?
<div id="wrap">
<div class="inner"></div>
</div>
<script>
var wrap = document.getElementById("wrap");
console.log(wrap)
</script>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script>
var inner = document.getElementsByClassName("inner");
console.log(inner[0])
</script>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script>
var inner = document.getElementsByTagName("div");
console.log(inner[0])
</script>
<div id="wrap">
<div class="inner" name="box"></div>
<div class="inner" name="box"></div>
<div class="inner" name="box"></div>
</div>
<script>
var inner = document.getElementsByName("box");
console.log(inner[0])
</script>
ES5的元素选择方法:
<div id="wrap">
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
</div>
<script>
var inner = document.querySelector("#wrap .inner");
console.log(inner.innerText) //你好啊
</script>
<body>
<div id="wrap">
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
<div class="inner" name="box">你好啊</div>
</div>
<script>
var inner = document.querySelectorAll("#wrap .inner");
console.log(inner[0].innerText); //你好啊
</script>
四~五、如何创建一个元素？如何给元素设置属性？如何删除属性？如何给页面元素添加子元素？如何删除页面元素下的子元素?
HTML:
<div class="wrap">
<div class="inner">第一个</div>
<div class="inner">第二个</div>
<div class="inner">第三个</div>
<div class="inner">第四个</div>
</div>
JS:
var wrap = document.querySelector(".wrap");
var innner = wrap.querySelectorAll(".inner");
var newElem = wrap.createElement("div");// 产生元素节点；
var newContent = wrap.createTextNode("第五个");//产生文本节点；
newElem.setAttribute("class","inner");//设置新元素的属性；
newElem.appendChild(newContent);//把文本节点插入生成的元素节点
wrap.appendChild(newElem);//把生产的元素插入到wrap里面；
inner[0].removeAttribute("class");//删除wrap第一个inner子元素的class属性；
wrap.removeChild("inner[1]");//删除wrap第二个inner子元素；
六、element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
- element.classList.add("className")：增加一个class；
- element.classList.remove("className")：删除一个class；
- element.classList.toggle("className")：新增删除切换；
- element.classList.contains("className")：判断是否有这样一个class；
HTML:
<div class="wrap">
<div class="inner">第一个</div>
<div class="inner">第二个</div>
<div class="inner">第三个</div>
<div class="inner">第四个</div>
</div>
JS:
var wrap = document.querySelector(".wrap");
var inner = wrap.querySelector(".inner");
console.log(inner.classList.contains("inner"))//true 查找是非有这个class；
inner.classList.add("box"); //新增一个class；
inner.classList.remove("inner"); //删除一个class；
七、 如何选中如下代码所有的li元素？ 如何选中btn元素？
<script>
var box = document.querySelector(".mod-tabs");
var oli = box.querySelectorAll("li");
var obtn = box.querySelector(".btn");
var oli2 = box.getElementsByTagName('li');
var obtn2 = box.getElementsByClassName("btn")[0];
</script>
网友评论