博客列表 >DOM笔记

DOM笔记

小淇的博客
小淇的博客原创
2019年03月16日 11:04:46633浏览
  1. DOM:Document Object Model 文档对象模型

  2. DOM:指当前要操作的文档内容,准确的说就是HTML文档,其实还包括XML文档

  3. 文档树:html文档中的内容以树形结构呈现的

  4. 节点:文档中组成部分,node类型,节点对象

  5. 节点类型:最常用的只有三种类型的节点:document文档节点,element元素节点,text文本节点

    -------------------------------------------------------------------------------------------------------


2.选择页面元素的方法

<h3 id="header" class="red" style="color:greeen" title="php.cn" name="username">php中文网</h3>

1、ID选择器:    getElementById('header');

2、CLASS选择器:    getElementsByClassName('red')

3、tagname选择器:    getElementsByTagName('h3')

4、name选择器:    getElementsByName('username')

5、CSS选择器:    querySelector()    ,querySelectorAll()

6、元素的属性:添加,删除,更新

-------------------------------------------------------------------------------------------------------


3,DOM元素的操作

1、创建:    createElement('p')

2、插入:    parentNode.appendChild('p')

3、删除:    removeChild('p')

4、更新:    replaceChild('p',old)

-------------------------------------------------------------------------------------------------------


4、DOM实战:

-------------------------------------------------------------------------------------------------------

    1、根据id属性获取元素

实例

<ul id="lists">
        <li id="item1">列表项01</li>
        <li>列表项02</li>
        <li id="item2">列表项03</li>
        <li>列表项04</li>
        <li id="item3">列表项05</li>
    </ul>

    <script>
    // 通过函数来简化以上的操作
    function getElements(){ //参数是多个id字符串
        let elements = {};  //保存获取到的dom对象元素
        for(let i=0;i<arguments.length;i++){
            let id = arguments[i];  //获取参数id的字符串
            let elt = document.getElementById(id);  //根据id字符串
            if(elt === null){
                throw new Error('没有这个元素'+id); //抛出异常
            }
            elements[id] = elt; //将获取到的元素保存到结果集合中
        }
        return elements;    //将获取到的元素返回
    }
    // 根据id获取页面上的指定元素,返回一个关联数组对象,键名就是id
    let elements = getElements('item1','item2','item3');
    console.log(elements);
    for(let key in elements){
        elements[key].style.backgroundColor = 'red';
    }
    </script>


    2.根据name属性获取元素

实例

<!-- name属性并不是所有元素都有,只有一些特定元素才会有,表单,表单内的元素,图像,ifrane -->
<form action="" name="login">
    <input type="text" name='username'>
    <input type="password" name='password'>
    <button name="botton">提交</button>
</form>
<script>
    // getElementsByName返回的是一个节点数组
    let login = document.getElementsByName('login')[0]
    // console.log(login);
    // 我们可以把name属性当成document对象的属性来用
    let login1 = document.login;
    // console.log(login1);
    login1.style.backgroundColor = 'green';
</script>

    可以把name属性当成文档对象属性来使用


    3.根据标签名来获取元素

实例

<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
<script>

let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'green';
// 返回的是一个元素的集合,就会有一个length
console.log(document.getElementsByTagName('ul').length);

//元素的集合其实是一个对象,它的上面有一个方法:itme()
let ull = document.getElementsByTagName('ul').item(0);
ull.style.backgroundColor = 'lightblue';

// 获取所有li元素
let uli = document.getElementsByTagName('li')
for(let i=0;i<uli.length;i++){
    uli[i].style.backgroundColor='lightpink';
}

// 改方法不仅定义文档对象,还可以在元素对象上使用
let ui = document.getElementsByTagName('ul').item(0);
let uli1 =  ui.getElementsByTagName('li').item(1);
uli1.style.backgroundColor = 'green';
</script>

 

    4.name属性和标签名获取元素的快捷方式

实例

<img src="../images/截图/timg.jpg" alt="" name="pic">
<form action="" name="register">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码不少于8位">
    <button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>
<script>
// 以文档对象的方式来访问这些特定的元素集合
// document.images:获取所有的img元素,返回是一个数组
document.images[0].style.width = '100px';       //1.标签的数字索引访问
document.images['pic'].style.width = '200px';   //2.使用name属性值获取元素
// 如果把images看成对象,name就可以看成属性
document.images.pic.style.width = '300px';      //3.name作为images对象的属性

//forms属性:获取到页面中的所有form
// 1.索引
// 2.name属性值
// 3.name作为form表单的对象属性
// 4.使用元素集合item()方法
document.forms[0].style.backgroundColor = 'lightgreen'; 
document.forms['register'].style.backgroundColor = 'red';
document.forms.register.style.backgroundColor = 'lightblue';
document.forms.item(0).style.backgroundColor = 'lightgreen';

// links 链接A
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'yellow';

// 获取body
document.body.style.backgroundColor = 'lightblue';

// 获取head
// 插入了一条空的style标签
let style = document.createElement('style');    //createElement通过指定名称创建一个元素
document.head.appendChild(style);

// documentElement获取html
console.log(document.documentElement);

// doctype获取文档类型
console.log(document.doctype);
</script>

    5.通过class属性来获取元素

实例

<ul class="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li>列表项04</li>
    <li class="coral large">列表项05</li>
</ul>
<script>
// 根据class来获取元素
let red = document.getElementsByClassName('red')[0];
red.style.backgroundColor = 'red';

// 该方法不仅可以在document对象上调用,也可以在元素上调用,一般是在父元素上调用
let ul = document.getElementsByClassName('ul')[0];
let green = ul.getElementsByClassName('green').item(0);
green.style.backgroundColor ='green';

// class支持多值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'red';
</script>

    6.通过css选择器来获取元素

实例

    <ul id="ul">
        <li class="red">列表项1</li>
        <li class="green">列表项2</li>
        <li>列表项3</li>
        <li class="green">列表项4</li>
        <li class="cpral large">列表项5</li>
    </ul>
<script>
// 选择页面元素最简单的方式就是用css选择器
// querySelectorAll返回一个元素的集合
let lists = document.querySelectorAll('li');    //根据标签选择器li来获取
console.log(lists);

// 该方法也可以在元素上调用
// querySelector   返回满足条件的一个
// querySelectorAll 返回满足条件的集合
let ul = document.querySelector('#ul');
let li = ul.querySelectorAll('.green');
for(let i=0;i<li.length;i++){
    // 有两个green,所以需要循环出来
    li[i].style.backgroundColor = 'green';
}
</script>


---------------------------------------------------------------------------------------------------------------------------------

DOM操作元素的技巧

1、如何通过DOM方法来遍历文档树

//文档中所有内容都是节点类型

// 节点有文档节点document,元素节点element,text文本节点

// 每个节点对象还有三个最常用的属性:nodetype节点类型,nodename节点名称,nodevalue节点的值

查看顶层的文档节点对象

console.log(document.nodeType);
console.log(document.nodeName);
console.log(document.nodeValue);


//childNodes    获取父节点下的所有子节点

//children         获只取元素子节点

获取body

console.log(document.childNodes[1].childNodes[2]);
// 为了避免文本节点的干扰,js还提供了一套api,仅获取子元素节点(忽略空格)
console.log(document.children[0].children[1]);

实例:

获取ul

let ul = document.children[0].children[1].children[0];
ul.firstElementChild.style.backgroundColor = 'green';   //获取ul下的第一个子元素
ul.lastElementChild.style.backgroundColor = 'red';  //获取ul下的最后一个子元素
console.log(ul.childElementCount);  //获取ul下的子元素的数量
console.log(ul.children.length);    //获取ul下的子元素的数量

获取第三个li

let li1 = ul.children[2];
console.log(li1);

获取兄弟元素,父级元素

li1.nextElementSibling.style.backgroundColor = 'yellow';    //获取下一个兄弟元素,同级的
li1.previousElementSibling.style.backgroundColor = 'cyan';  //获取上一个兄弟元素,同本同级的
li1.parentElement.style.background = 'wheat';   //获取父元素

parentNode返回某节点的父节点,没有则返回null

li1.parentNode.style.backgroundColor = 'red';


2、如何操纵HTML元素的属性?

    html元素属性有二类:1.标签自带的原生属性;2.用户自定义的属性

实例

<img src="../images/截图/timg.jpg" alt="" width="320">
<h3 id="header" class="hello" style="color:red" title="当情妇来敲门" index="我是图片">《当情妇来敲门》:别走,情妇终究会到来</h3>

(1)原生属性:看作当前元素对象的属性,进行读写

原生属性

let img = document.getElementsByTagName('img')[0];
img.src = '../images/12.png';// 更新属性
img.width = '400';
// class属性,因为class与js关键字冲突,用classname来表示
let h3 = document.getElementById('header');
console.log(h3.className);
// style属性,它的值不是一个字符串,而是一个对象
h3.style.color = 'green';

(2)自定义属性:(以下四种方法均动态修改属性,并没有影响原生属性的值,除了可以修改自定义属性外也能修改原生属性的值)

hasAttribute    验真指定属性是否存在

getAttribute    返回指定属性的值

setAttribute    添加属性并为其赋值

removeAttribute  移出指定属性

自定义属性实例

if(h3.hasAttribute('index')){
    console.log(h3.getAttribute('index'));      //查看index属性
    h3.setAttribute('index1','我是一张图片');    //添加index1属性
    h3.removeAttribute('index1');               //移除index1属性
}


(3)如何处理HTML元素中的内容

元素的内容主要分两类:

    1.纯文本 

    2.html代码

实例

<p>我正在学习javascript编程技术</p>
<p>我正在学习<strong style="color:red;">javascript</strong>编程技术</p>

innerhtml:将元素内容全部读出,包括html代码

实例

let p1 = document.getElementsByTagName('p')[0];
let p2 = document.getElementsByTagName('p').item(1);
console.log(p1.innerHTML);
console.log(p2.innerHTML);

textContent仅获取纯文本

console.log(p1.textContent);
console.log(p2.textContent);

使用节点对象的方式输出文本:

if(p1.childNodes[0].nodeType === 3){
    console.log(p1.childNodes[0].nodeValue);
}
    p2也可以使用上述例子输出文本,但是text中混杂了<strong>元素标签所以并不能完全输出


(4)DOM节点的创建/插入/删除/更新操作

创建新节点

let ul = document.createElement('ul');
// 2.将新元素添加到页面中,要在父元素上调用
document.body.appendChild(ul);
// 3.在ul中添加子元素
ul.innerHTML = '<li>我是列表项1</li>'

插入新节点

appendchild()默认是插入到父节点的尾部

let li = document.createElement('li');
li.innerHTML = '我是列表项2';
ul.appendChild(li); //默认是插入到父节点的尾部

如果我想在任意位置插入,应该怎么办?

insertBefore('新节点','插入的位置')

let li1 = document.createElement('li');
li1.innerHTML = '我是列表项3';
// insertBefore('新节点','插入的位置')
ul.insertBefore(li1,li);

如果插入新元素末尾是一个空值

inserbefore等价于appendchild

let li2 = document.createElement('li');
li2.innerHTML = '我是列表项4';
// ul.insertBefore(li2,null);
ul.appendChild(li2);

删除子节点

ul.removeChild(li2);

替换新的子节点

let li3 = document.createElement('li');
li3.innerHTML = '我是新替换li的节点';
ul.replaceChild(li3,li);


---------------------------------------------------------------------------------------------------------------------------------

DOM实战:

1、聊天信息生成原理

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>提交</title>
</head>
<body>
<input type="text" name="info">
<button>提交</button>
<ul></ul>
<script>
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
button.onclick = function(){
        let li = document.createElement('li');
        li.innerHTML = input.value;
        ul.appendChild(li);
        input.value = '';
}
</script>    
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例













声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议