一·DOM的一些简单方法与属性。
1·在javascript中,所有的节点都继承了Node类型,因此所有的类型都共享相同的基本属性和方法。
2·nodeName与NodeValue.
nodeName属性始终等于元素的标签名。nodeValue值如果由标签调用该属性,则会返回null,由文本节点调用则返回该文本节点的文本。
<div>123</div>
<script>
let div = document.querySelector('div');
let text = div.childNodes;
console.log(text);
console.log(text[0].nodeValue);
console.log(div.nodeValue);
console.log(div.nodeName);
</script>
3.childNodes,children,parentNode
<body>
<div class="box">
123
<ul>
<li>345</li>
</ul>
<div class="inner">678</div>
</div>
<script>
let div = document.querySelector('.box');
console.log(div);
console.log(div.children);
console.log(div.childNodes);
console.log(div.childNodes[0].parentNode);
</script>
</body>
4.操作节点的方法,这些方法都由父节点调用,用来操作子节点。
<body>
<div class="box">
<div class="inner"></div>
</div>
<script>
let outerDiv = document.querySelector('.box');
let ul = document.createElement('ul');//创建一个元素
let box = document.createElement('div');
let h2 = document.createElement('h2');
outerDiv.appendChild(ul);//把这个节点添加到父节点中子节点的最后
outerDiv.insertBefore(box,outerDiv.childNodes[0]);//插入在指定元素之前
outerDiv.replaceChild(h2,outerDiv.children[1]);//用一个节点替换子节点
outerDiv.removeChild(outerDiv.lastChild);//移除指定节点
console.log(outerDiv);
</script>
5.cloneNode()方法
此方法为所有节点共享,它会返回与调用他的节点一模一样的节点。此方法接受一个布尔值作为参数,传入true则为深复制,会复制几点及整个子DOM树,如果传入false,则为浅复制,只会赋值这个节点。
<body>
<div class="box">
<div class="inner"></div>
</div>
<script>
let div = document.querySelector('.box');
console.log(div);
let deepdiv = div.cloneNode(true);
console.log(deepdiv);
let nodeepdiv = div.cloneNode(false);
console.log(nodeepdiv);
div.insertBefore(deepdiv,div.firstChild);
console.log(div);
</script>
</body>
6·直接获取html和body元素的方式。
<body>
<script>
let html = document.documentElement;//获取html标签
let body = document.body;//获取body标签
console.log(html);
console.log(body);
</script>
</body>
7.获取元素的方法。
1,getElementById() 2,getElementsByTagName ()
3getElementsByName(),这个方法常用于单选按钮,因为同一字段的单选按钮必须具有相同的name属性才能确保把正确的值发送给服务器。
8.操作元素类型属性的方法。
1,getAttribute() 2 setAttribute() 3removeAttribute()
注意:getAttribute()的属性名与实际的属性名是一样的,所以要传入‘class’,这个方法主要用于取得自定义的属性值。
setAttribute(),接收两个参数,要设置的属性名和属性值,如果属性已经存在,则会替换原来的值。
<body>
<div class="box"></div>
<script>
let div = document.querySelector('.box');
let attr = div.getAttribute('class');
console.log(attr);
div.setAttribute('id','one');
console.log(div);
// div.removeAttribute('id');
console.log(div);
</script>
</body>